Блог

Главная - Вопросы по программированию - Vue как активировать переходы по ссылкам на основе интервала

Vue как активировать переходы по ссылкам на основе интервала

#javascript #vue.js

Вопрос:

В моем vue приложении у меня есть список ссылок, которые я хочу, чтобы они автоматически запускались одна за другой с интервалом по умолчанию, скажем, через 3 секунды запускается первая ссылка, затем еще через 3 секунды запускается ссылка 2… так что это своего рода карусель/автозапуск со ссылками, которых я хочу достичь, но я действительно не знаю, как это решить.

вот мой код:

 <li v-for="(slide, index) in slides" :key="index" :class="slideIndex === index ? 'active' : ''" @click="slideIndex = index" ref="slide">
 {{ slide.title }}
</li>

а потом я подумал что-то вроде этого:

 mounted() {    
  Object.keys(this.$refs.slide).forEach((el) => {
    setInterval(() => {
      this.$refs.slide[el].click();
    }, 3000);
  });
},

но это запускает все ссылки и кажется совсем неправильным, но это всего лишь небольшая идея…

Кто-нибудь может мне помочь?

Комментарии:

1. Это похоже на проблему XY. Что вы хотите, так это увеличивать индекс каждые 3 секунды.

Ответ №1:

Я бы не рекомендовал делать это, имитируя щелчок по ссылке.

Как насчет установки элемента, который вы хотите сделать активным в своем коде?

Я предполагаю slideIndex , что это текущий выбранный слайд?

Вы могли бы попробовать что-то вроде этого:

 setInterval(() => {
    this.slideIndex = this.slideIndex < this.slides.length - 1 ? (this.slideIndex  = 1) : 0;
}, 3000);

Таким образом, вы добавляете 1 каждый раз, когда запускается интервал, и циклически просматриваете слайды. Если он в конце slideIndex , сбрасывается и начинается в 00

Метки: