【问题标题】:Why carousel does not work when using v-for in img, vuejs?为什么在img、vuejs中使用v-for时轮播不起作用?
【发布时间】:2019-11-07 03:32:49
【问题描述】:

我目前正在使用以下库:https://www.npmjs.com/package/vue-owl-carousel

事实证明,当在轮播内部的 img 中使用 v-for 时,轮播无法正常工作。

这样不行:

<carousel
    :autoplay="true"
    :loop="true"
    :center="true"
    :nav="false"
    :margin="5"
>
  <img
    v-for="item in detIncidente.fotos"
    :key="item.fecha"
    :src="item.path"
    width="446"
    height="446"
    @click="showSingle(item.path)"
   />
</carousel>

如果它对我正常工作,这样:

    <carousel
      :autoplay="true"
      :loop="true"
      :center="true"
      :nav="false"
      :margin="5"
    >
       <img width="446" height="669" src="https://placeimg.com/200/200/any?3" />
       <img width="446" height="669" src="https://placeimg.com/200/200/any?4" />
       <img width="446" height="669" src="https://placeimg.com/200/200/any?2" />
       <img width="446" height="669" src="https://placeimg.com/200/200/any?3" />
</carousel>

【问题讨论】:

    标签: vue.js owl-carousel


    【解决方案1】:

    如果动态加载图片,轮播组件不会等到数据加载完毕。

    您可以尝试添加v-if

    v-if="detIncidente && detIncidente.fotos && detIncidente.fotos.length"
    

    完整代码

    <carousel
        v-if="detIncidente && detIncidente.fotos && detIncidente.fotos.length"
        :autoplay="true"
        :loop="true"
        :center="true"
        :nav="false"
        :margin="5"
    >
      <img
        v-for="item in detIncidente.fotos"
        :key="item.fecha"
        :src="item.path"
        width="446"
        height="446"
        @click="showSingle(item.path)"
       />
    </carousel>
    

    【讨论】:

    • 非常感谢,这对我有用,忍受几天。
    猜你喜欢
    • 2020-04-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-07
    • 2018-12-20
    • 2021-10-31
    • 1970-01-01
    • 2021-04-01
    相关资源
    最近更新 更多