我目前正在使用bootstrap模态并在 layouts/default.vue 中渲染它
<template>
<div>
<Navbar/>
<b-container>
<nuxt/>
<b-modal id="modal1" title="Bootstrap-Vue">
<div>
<component :is="dynamicComponent"></component>
</div>
</b-modal>
</b-container>
</div>
</template>
<script>
export default {
data() {
return {
dynamicComponent: null
}
}
}
</script>
从我的另一页 items/search.vue
我正在展示一系列项目，我可以点击它来显示模态 .
<template>
<div>
<div @click="showModal" class="item-card">
<b-card overlay
:title="name"
:img-src="cardImg"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
</b-card>
</div>
</div>
</template>
<script>
import FormInput from '~/components/FormInput';
export default {
name: 'ItemPreview',
props: {
uuid: { type: String, required: true },
name: { type: String, required: true },
dataset: { type: String, required: true },
images: { type: Array, required: false },
cardImg: { type: String, required: false, default: '1.jpg' }
},
methods: {
showModal(event) {
// FormInput to dynamicComponent and show modal
this.dynamicComponent = FormInput;
this.$root.$emit('bv::show::modal','modal1');
}
}
}
</script>
我设法显示模态，但我想渲染我从 items/search.vue 导入的组件