[Vuejs]-Slick.js don't work when v-for is updated

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();
        }
    }
}

Leave a comment