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

上面这段代码的问题是，如果您将该项目设置为活动状态并对其进行循环，则其后的所有项目也将都处于活动状态。

当您到达最后一个索引时，它不会是index + 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

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

可以尝试吗？

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;
            }

        }
    });

更改数组中下一项的值

4 个答案: