Vue类绑定时读取对象属性报Cannot read properties of undefined错误如何解决

开发者阿泽

2026-10-1

问题原因

你遇到的报错最可能来自toggleIsSelected方法的实现错误，结合你给出的代码，常见的错误场景如下：

你在方法中直接用day.id作为数组下标读取January数组元素：你的day.id从1开始计数，而数组下标从0开始，当点击id为31的日期时，this.January[31]为undefined，读取undefined.isSelected就会触发你遇到的报错。
你后续重新赋值January数组时，新的数组项没有初始化isSelected字段，导致读取该属性失败。

修复方案

因为你在@click事件中已经直接把当前遍历的day对象作为参数传入方法，最简单的实现方式如下，不需要额外查找数组下标：

// 在Vue的methods配置中添加该方法
methods: {
  toggleIsSelected(day) {
    day.isSelected = !day.isSelected
  }
}

如果你需要通过id匹配的方式修改属性，请使用数组查找方法匹配对应元素，避免下标对应错误：

methods: {
  toggleIsSelected(day) {
    const target = this.January.find(item => item.id === day.id)
    if (target) {
      target.isSelected = !target.isSelected
      // Vue2环境如果存在响应式失效问题，可以替换为下面的写法
      // this.$set(target, 'isSelected', !target.isSelected)
    }
  }
}