vue-flickity
vue-flickity copied to clipboard
Load dynamic data into vue-flickity and Firefox bug
This is not a bug, but a solution after 2 days trying to fix this thing.
Using this component and axios, I retrieve data, use v-for
and refresh vue-flickity but I had problems rebuilding the carousel. Also, getting that data and using created ()
exploded in Firefox and coudn`t create the carousel.
Solution:
axios(
{
method: .....m
url: ....,
data: ....
})
.then(response => {
if (response && response.status === 200) {
this.myData = response.data // this will be used in v-for inside flickity
} else {
// raven....
}
})
.then(response => {
this.$nextTick(function () { // the magic
this.$refs.flickity.rerender()
})
})
.catch((error) => {
// raven
})
<flickity ref="flickity" :options="myOptions">
<div class="carousel-cell" v-for="item in myData" :key="item.id">
<span class="name">{{ item.names }} {{ item.father_surname }}</span>
</div>
</flickity>
I have same problem with you, but after i try the solution above, the error of " Cannot read property 'rerender' of undefined" was returned
@jian11231 you must have a referer, see ref="flickity"
in the component and this.$refs.flickity.rerender()
I'm not seeing any reactive updates to the slider contents. It works on page load but as soon as I update the content of the slider, the parent component node is empty.
<Flickity ref="flickity" :options="flickityOptions">
<div v-for="image in images" :key="image" class="QuickBuy-image">
<img :src="image" />
</div>
</Flickity>
@aghouseh the :key
in a loop in Vue usually receives and int (unique id), so try with:
<div v-for="image in images" :key="image.id" class="QuickBuy-image">
<img :src="image" />
</div>
- 先移除旧实例
- 再重新获取数据【重新渲染】
I'm not seeing any reactive updates to the slider contents. It works on page load but as soon as I update the content of the slider, the parent component node is empty.
<Flickity ref="flickity" :options="flickityOptions"> <div v-for="image in images" :key="image" class="QuickBuy-image"> <img :src="image" /> </div> </Flickity>
Same here. Did you manage to find a fix?