slider issue. - sigmawebstore by ali

slider-issue.js

Hello Developers

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

Case 1: 

There is an array in data() option. Here 

Static--

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

Dynamic--

<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
<template>
    <div>

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

    </div>
</template>

data () {
    return {
        slides: null
    }
},

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

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



I am expecting a solution from you developers. Please