在我通过调整 window 的大小强制重新渲染之前，VueJs 组件不会在模态中渲染

Question

我正在使用“Carousel-3d”（将其导入全球项目），就像这样

import Carousel3d from 'vue-carousel-3d'
Vue.use(Carousel3d)

来源： https://wlada.github.io/vue-carousel-3d/guide/

然后我尝试在模态中使用它

SingleStoreItem.vue 文件

<template>
    <div>
        <carousel-3d>
             <slide v-for="index in item.images.length" :key="index-1" :index = item.images[index-1].id>
                   <img :src="item.images[index-1].src"> 
             </slide>
        </carousel-3d>
    </div>
</template>

<script>
export default {
    name: "SingleStoreItem",
    
    props: {
        item: Object
    },
};
</script>

其中 item 是从父级传递的 object。

问题是当我打开模态时，这会显示模态而没有渲染轮播

当我稍微拖动 window 以调整它的大小时，轮播出现Modal 并呈现轮播

这就是我执行模态并将参数传递给它的方式。

<b-modal :id="item.id"  size='xl' centered ok-only :title="item.name">
     <SingleStoreItem
      v-bind:item=item
     />
</b-modal>

Answer 1

我相信您的 Modal 触发器以某种方式影响了SingleStoreItem.vue的生命周期

因为您的代码片段特别是缺少代码。 <script>在组件中，恐怕我们无能为力。

但您可能需要处理：

• 父母的mounted或method挂钩

mounted () {
    this.$nextTick(function () {
    // // Code that will run only after the
    // // entire view has been re-rendered
    })
  },