首页 > 解决方案 > 更改数组中下一项的值

问题描述

我正在尝试制作一个简单的 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 方法中——有没有更优雅的方法来做到这一点?

标签: javascriptvuejs2

解决方案


上面这段代码的问题是,如果您将项目设置为活动并循环它,那么它之后的所有项目也将处于活动状态。

当你到达最后一个索引时,它不会是 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

推荐阅读