En mi aplicación vue tengo una lista de enlaces, que quiero que se activen automáticamente uno por uno según un intervalo predeterminado, digamos que después de 3 segundos, se activa el primer enlace, luego, después de otros 3 segundos, se activa el enlace 2. .. así que es una especie de carrusel/reproducción automática con enlaces que quiero lograr, pero realmente no sé cómo resolver eso.
aquí está mi código:
<li v-for="(slide, index) in slides" :key="index" :class="slideIndex === index ? 'active' : ''" @click="slideIndex = index" ref="slide"> {{ slide.title }} </li>y luego pensé algo como esto:
mounted() { Object.keys(this.$refs.slide).forEach((el) => { setInterval(() => { this.$refs.slide[el].click(); }, 3000); }); },pero esto activa todos los enlaces y no parece estar del todo bien, pero es solo una pequeña idea...
¿Alguien me puede ayudar?
No recomendaría hacer esto simulando un clic en el enlace.
¿Qué hay de configurar el elemento que desea que esté activo en su código?
Supongo que slideIndex es la diapositiva seleccionada actual.
Podrías intentar algo como esto:
setInterval(() => { this.slideIndex = this.slideIndex < this.slides.length - 1 ? (this.slideIndex += 1) : 0; }, 3000); Por lo tanto, agrega +1 cada vez que se activa el intervalo y recorre las diapositivas. Si es al final slideIndex se reinicia y comienza en 00