Hola desarrolladores,
Estoy usando splidejs para el componente deslizante vue. No creo que haya problemas con splidejs. Pero hay un problema descrito aquí.
Hay un componente deslizante. Estoy haciendo diapositivas dinámicas. Hay dos enfoques.
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
*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
Resultado para el caso 2: interrupción de la interfaz de usuario. El control deslizante deja de funcionar mientras llama a la API.
nota :