计算属性可显示数组但读取数组元素属性时触发undefined错误

1. 计算属性内部递归调用：你在getGrouped的forEach循环里直接访问this.getGrouped[index]，每次访问都会触发计算属性的重新执行，形成递归调用逻辑。
2. 数组元素未完成初始化：递归执行时，ColorwithRate正处于元素添加的过程中，对应index位置的元素还没被push到数组里，此时this.getGrouped[index]实际是undefined。控制台显示“数组”是浏览器控制台的异步更新特性导致的——它会在后续元素被添加后更新显示内容，但执行console.log(this.getGrouped[index].selectedColor)的瞬间，该位置确实没有有效元素，因此抛出“无法读取undefined的selectedColor属性”的错误。

直接使用forEach循环中的当前元素c即可，无需访问还在构建中的getGrouped数组。修改后的代码如下：

computed: {
  getGrouped() {
    let ColorwithRate = [];
    this.FilteredColor.forEach((c, index) => {
      c.selectedRate = 0;
      // 直接操作当前循环的c对象
      console.log(c);
      console.log(c.selectedColor);
      ColorwithRate.push(c);
    })
    return ColorwithRate;
  }
},

如果你的需求是访问ColorwithRate中已经添加的前序元素，可以直接用ColorwithRate[index - 1]这类方式，避免触发计算属性的递归调用。

内容的提问来源于stack exchange，提问作者16_018_RHR