Hola desarrolladores,

Estoy usando splidejs para el componente deslizante vue. No creo que haya problemas con splidejs. Pero hay un problema descrito aquí.

Tema

Hay un componente deslizante. Estoy haciendo diapositivas dinámicas. Hay dos enfoques.

Caso 1:

Estático--

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

Dinámico : hay una matriz en la opción data(). Aquí

 <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", }, ], } }

Resultado: Trabajando Perfecto

Caso 2

*Estoy usando api aquí. La respuesta de la API es 100% correcta. No hay problema con 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) } } }

Respuesta API aquí en captura de pantalla

respuesta de la API

Resultado para el caso 2: interrupción de la interfaz de usuario. El control deslizante deja de funcionar mientras llama a la API.

nota :

1. El problema no está relacionado con splidejs
2. Estoy usando vue 3 cdn.
3. Todos los complementos como axios, splidejs se importan globalmente. No hay problema con ellos