动态组件未在其他页面上呈现事件

我目前正在使用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 导入的组件

回答(0)