使用 Loop 时 Vue-Owl-Carousel 不起作用答案

【问题标题】：Vue-Owl-Carousel not working when using Loop使用 Loop 时 Vue-Owl-Carousel 不起作用
【发布时间】：2019-10-05 07:48:12
【问题描述】：

Vue-Owl-Carousel 使用基本模型很好地工作：

<carousel>
  <img src="https://placeimg.com/200/200/any?1">
  <img src="https://placeimg.com/200/200/any?2">
  <img src="https://placeimg.com/200/200/any?3">
  <img src="https://placeimg.com/200/200/any?4">
</carousel>

但是当我使用循环时，轮播会损坏并在列中显示所有幻灯片。

<carousel> // Not Working
 <img v-for="slide in slides" :src="getslide(slide)">
</carousel>

<carousel> // Not Working
 <template  v-for="slide in slides"><img :src="getslide(slide)"></template>
</carousel>

<carousel> // Not Working, the error is with v-for..
<img v-for="slide in slides" src="/slide.png">
</carousel>

如果你能提供帮助，谢谢。

【问题讨论】：

我测试过，它似乎按预期工作。 codesandbox.io/s/vue-owl-carousel-demo-g13k7slides你有几样东西？

标签： vue.js

【解决方案1】：

你可以试试：

<div v-if="slides.length > 0">
<carousel>
 <img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div

【讨论】：

【解决方案2】：

您是否使用 axios 从数据库中获取数据到幻灯片数组？如果是这样，则在数组中接收到数据之前渲染 vue 的模板，导致轮播不工作。您可以重新渲染 vue 组件，它会工作。我遇到了同样的问题，重新渲染 vue 解决了。

【讨论】：

【解决方案3】：

<div v-if="slides.length > 0">
<carousel>
 <img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div

代码为我工作:)

【讨论】：

关于“代码为我工作:)”：假设您作为答案发布的代码确实有效；否则你不应该发帖。所以最好删除该语句，而是解释您的代码做了什么（它是如何工作的）。

【解决方案4】：

我遇到了同样的问题，请检查您的幻灯片数据是否正确

试试这个代码：

<carousel v-if="slides">
   <img v-for="slide in slides" :src="slide.png">
</carousel>

【讨论】：