У меня есть набор данных, которые я втягиваю через Firebase. Я хочу отображать изображения, указанные в данных Firebase, в карусели. Я установил директиву (ниже). Проблема, с которой я столкнулась, связана с v-for
. Директива выполняется до v-for
и, следовательно, никакой карусели, поскольку элементы не существуют.
Директива:
directives: {
slick: {
inserted: function (el) {
$(el).slick({
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
speed: 2000,
fade: true,
pauseOnHover: false
})
}
}
}
HTML
<div v-slick>
<div v-for="sponsor in sponsors">
{{sponsor.name}}
</div>
</div>
Подождите, чтобы создать экземпляр директивы, пока sponsors
содержать данные.
Один быстрый и грязный способ сделать это:
<div v-slick v-if="sponsors.length"> ... </div>