Изменение значения следующего элемента в массиве

Question

Я пытаюсь сделать простой слайдер vue.js.У меня есть метод, который работает каждые 10 секунд, чтобы изменить активный элемент.Я не могу установить, чтобы следующий элемент был активным.

this.items.forEach(function(item, index, arr) {
    if(item.active == true)
    {
        console.log(arr[index+1].active);
        arr[index+1].active = true;
    }
});

Первая строка возвращает false или любое другое правильное значение.

Вторая строка возвращает cannot read value active of undefined,

Все это в методе Vue.js - есть ли более элегантный способ сделать это?

Answer 1

Можете попробовать это?

this.items.forEach(function(item, index, arr) {
        if(item.active == true)
        {
            if(arr.length !== (index+1) ){
                console.log(arr[index+1].active);
                arr[index+1].active = true;
            }

        }
    });

Answer 2

Это ошибка на последнем index, потому что arr[index+1].active в этот момент не существует.Как упомянул @epascarello, если вы зацикливаетесь и обновляете то, что делаете, как только будет найден item.active= true, каждый пост item.active, который будет установлен на true.Вместо этого вы можете изменить его на что-то вроде этого:

this.items = this.items.map(function(item, index, arr) {
  if (index === 0)
    return item
  else
    return { ...item, active: arr[index-1]["active"] ? true : item.active }
});

Answer 3

Вот очень простое решение с использованием Array.prototype.findIndex():

let activeIndex = this.items.findIndex((element)=>element.active === true);
        this.items[activeIndex]['active'] = false;
    if(activeIndex == this.items.length-1){
        this.items[0]['active'] = true;
    } else {
        this.items[activeIndex + 1]['active'] = true;
    }

Answer 4

Что ж, проблема с этим кодом выше состоит в том, что если вы установите элемент активным и зацикливаете его, все те, что после него, также станут активными.

И когда вы доберетесь до последнего индекса, этоне будет индекс + 1.Который не определен и, следовательно, ошибка, которую вы получаете.

Почему цикл?Сохраните индекс активным и добавьте один

this.activeIndex = 0

, а затем в ваш следующий код

this.items[this.activeIndex].active = false
this.activeIndex++
if (this.activeIndex >= this.items.length) {
  this.activeIndex = 0
}
this.items[this.activeIndex].active = true