[Vuejs]-Vue-Slick and v-for with dynamic data

I have faced the same issue, and what I did to solve this is to put the

v-if="categories.length > 0" on the <slick> tag.

It make the slick won’t be created before the data that we want to display contains the data first.

I’m assuming your Axios is returning data with the structure you are looking for.

I’m also assuming you are using the vue-slick component and not slick.

You should iterate through a DIV like stated in the documentation. Without Axios, I did this:

In template:

<slick ref="slick" :options="slickOptions">
      <div>Escolhe uma configuração...</div>
      <div v-for="d in data1"><a class="inline" :href="d.image"><img :src="d.image" alt="">{{ d.text }}</a></div>       
</slick>

In Javascript:

data: function() {
    return {
        data1: [
          {  image: 'http://placehold.it/100x100', text: 'Config1' }, 
          {  image: 'http://placehold.it/100x100', text: 'Config2' }, 
          {  image: 'http://placehold.it/100x100', text: 'Config3' }, 
          {  image: 'http://placehold.it/100x100', text: 'Config4' } 
        ]
    }

Use below code to reinit slick, and call on success function of response

 reInit() {

    let currIndex = this.$refs.slick.currentSlide()
    this.$refs.slick.destroy()
    this.$nextTick(() => {
        this.$refs.slick.create()
        this.$refs.slick.goTo(currIndex, true)
    })
 }