Vue.js 带有GlideJS的NuxtJS在克隆组件中加载组件将丢失组件

Vue.js 带有GlideJS的NuxtJS在克隆组件中加载组件将丢失组件,vue.js,nuxtjs,glidejs,Vue.js,Nuxtjs,Glidejs,我在一个NuxtJS项目中工作,我们正在实施。 我们现在遇到的问题是,有时其中一张幻灯片只显示幻灯片的HTML部分,而不显示包含的组件。当我们向前或向后移动直到看到特定的幻灯片时,它将成功加载组件。显然,这是一个缺陷,我们应该修复它 是否有人有过相同问题的经验,如果有,您是否找到了解决方案 我们的现行守则: <template> <div> <vue-glide v-if="entries.length > 0"

我在一个NuxtJS项目中工作,我们正在实施。 我们现在遇到的问题是,有时其中一张幻灯片只显示幻灯片的HTML部分,而不显示包含的组件。当我们向前或向后移动直到看到特定的幻灯片时,它将成功加载组件。显然,这是一个缺陷,我们应该修复它

是否有人有过相同问题的经验,如果有,您是否找到了解决方案

我们的现行守则:

<template>
  <div>
    <vue-glide
      v-if="entries.length > 0"
      ref="slider"
      type="carousel"
      class="max-w-full mb-6 md:mb-12"
      :per-view="perView"
      :breakpoints="breakpoints"
    >
      <vue-glide-slide v-for="(entry, index) in entries" :key="index">
        <div class="rounded-xl bg-app-green-200 overflow-hidden">
          <MoleculePicture image="entry.images">

          <div class="border-b-2 border-app-yellow block"></div>
          <div class="py-5 px-6">
            Some HTML here (working fine)
          </div>
        </div>
      </vue-glide-slide>
      <template v-if="entries" slot="control">
        <div class="float-left cursor-pointer border-box w-2/5 mt-4" data-glide-dir="<">
          <AtomIconArrowLeft class="w-4 float-left md:float-right" />
        </div>
        <div class="inline-block text-center border-box w-1/5 mt-4 font-bold">{{ currentSlide + 1 }}/{{ entries.length }}</div>
        <div class="float-right cursor-pointer border-box w-2/5 mt-4" data-glide-dir=">">
          <AtomIconArrowRight class="w-4 float-right md:float-left" />
        </div>
      </template>
    </vue-glide>
  </div>
</template>

这里有一些HTML(工作正常)
{{currentSlide+1}}/{{entries.length}
正如您所见,我们在幻灯片中使用了一个名为MoleculePicture的组件(在本例中,我们尝试了多个组件,但都失败了)

除了“克隆”幻灯片外,所有幻灯片都显示良好,我无法解决此问题