Почему карусель не работает при использовании v-for в img, vuejs? - PullRequest
Новая
       11

Почему карусель не работает при использовании v-for в img, vuejs?

0 голосов
/ 07 ноября 2019

В настоящее время я использую следующую библиотеку: https://www.npmjs.com/package/vue-owl-carousel.

Оказывается, что при использовании v-for в img внутри карусели карусель работает некорректно.

Этокак это не работает: 

<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>

1 Ответ

1 голос
/ 07 ноября 2019

Если вы загружаете изображения динамически, компонент карусели не ожидает загрузки данных.

Вы можете попробовать добавить 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>
...