Hi Developers,

I am using splidejs for the vue slider component. I don't think issue with splidejs. But there is an issue described here.

Issue

There is a slider component. I am making slides dynamic. There two approaches.

Case 1:

Static--

<template>
    <div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </div>
</template>

Dynamic-- There is an array in data() option. Here

<template>
    <div>
        <li v-for="(slide, index) in slides" :key="index">
           {{ slide.title }}
        </li>
    </div>
</template>

data () {
    return {
        slides: [
          {
            id: 1,
            title: "Best Handmade Goods",
          },
          {
            id: 2,
            title: "Best Cotton",
          },
       ],
   }
}

Result: Working Perfect

Case 2

*I am using api here. API response is 100% okay. No issue with axios. *

<template>
    <div>

        <li v-for="(slide, index) in slides" :key="index">
           {{ slide.title }}
        </li>

    </div>
</template>

data () {
    return {
        slides: null  or // same response on slides: []
    }
},

mounted() {this.fetchSlides()},

methods: {
    async fetchSlides() {
        try {
            const url = "https://fakestoreapi.com/products"
            const response = await axios.get(url)

            this.slides = response.data

            console.log(this.slides)

        } catch (error) {
            console.log(error)
          }
    }
}

API response here in screenshot

api response

Result for case 2: UI break. Slider stop working while API call.

note:

1. Issue is not related to splidejs
2. I am using vue 3 cdn.
3. All pluigns like axios, splidejs are imported globally. No issue with them