0👍
My assumption is that the code you have in the updated
hook is what you are wanting to run when the data being rendered by the v-for
directive changes. If that is the case, you should try using a watcher like so:
{
data() {
return {
id: undefined,
image: undefined,
locattion: undefined,
country: undefined,
tags: "Experiences",
destinations: undefined
}
},
created() {
this.getData();
},
watch: {
destinations: {
deep: true, // this will make it observe deep changes
// in objects this means it also fires when changes to its properties happen, not just when the object changes.
// not 100% positive, but I'm pretty sure you get a similar effect with arrays and their contents
handler: () => {
$('.slickItem').not('.slick-initialized').slick({
infinite: true,
slidesToShow: 3,
arrows: false
});
}
}
},
methods: {
getData() {
this.destinations = false;
this.axios.get('/api/destinations/tags/' + this.tags).then((response) => {
this.destinations = response.data;
console.log(this.destinations);
})
},
//Update ajax
changeTag(tag) {
$(".slickItem").slick("unslick");
$('.slickItem').html('')
this.tags = tag;
this.getData();
}
}
}
- [Vuejs]-Perform patch operation on the data
- [Vuejs]-Vuetify v-progress-linear (indeterminate) not updating
Source:stackexchange.com