0
在我的vue.js应用程序中,我需要在模态中显示自定义数据。我使用vue-js-modal
能够从我的应用程序内的任意位置显示一个模式:https://www.npmjs.com/package/vue-js-modal使用vue-js-modal,我如何访问传递给模态的数据?
我创建了一个非常简单的自定义模式的模板来尝试一下,叫ItemModal.vue
:
<template>
<modal name="item-modal">
<b>{{item.name}}</b>
</modal>
</template>
<script>
export default {
name: 'item-modal',
props: [ 'item' ]
}
</script>
,我能够成功地把它从我的ItemList.vue
组件内部:
<template>
<div id="content">
<item-modal></item-modal>
<li v-for="item in items">
<a v-on:click="showModal(item)">
<span>{{item.name}}</span>
</a>
</li>
</div>
</template>
<script>
import ItemModal from './ItemModal.vue';
import Items from '@/api/items';
export default {
name: 'items',
asyncComputed: {
items: {
async get() {
const items = await Items.getAll();
return items.data;
},
default: []
}
},
methods: {
showModal(item) {
this.$modal.show('item-modal', { item: item });
}
},
components: {
ItemModal
}
}
</script>
然而,模态出现空。
我在ItemModal.vue
中错过了什么,能够使用我在showModal
函数中传递给它的数据?
建议你阅读了关于插槽。 https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots – Bert