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