Vue v-for遍历方法返回数组 访问对象属性报TypeError:undefined错误

getMonthDaysGrid()返回的数组存在未赋值的空元素，v-for遍历到这些空元素时，尝试读取undefined的属性就会触发类型错误。
对应你的实现逻辑问题点：

1. 你通过Array.from({ length: totalDays })创建了长度为totalDays的数组，这个数组初始状态下所有索引位的值都是undefined
2. 后续的for循环是从索引totalLastMonthDays的位置才开始给数组元素赋值日期对象，索引0到totalLastMonthDays - 1的所有位置始终没有赋值，值保持为undefined
3. v-for会遍历数组的全部索引位，不会自动跳过空值，当遍历到前面的未赋值索引时，循环拿到的day就是undefined，此时访问day.date就会抛出TypeError。

你可以根据业务场景选以下两种方案：

• 临时兼容方案：模板层加空值判断，跳过空元素的属性渲染

<div v-for="(day, idx) in cal.getMonthDaysGrid()" :key="idx">
  <p v-if="day">
    {{ day.date }}
  </p>
</div>

• 根因修复方案（日历场景推荐）：补全数组所有位置的日期对象，保证返回值是结构一致的完整数组。日历组件通常需要展示上月末尾、下月开头的占位日期来对齐周几的排版，你可以在方法里把这部分占位数据也填充进数组，确保每个索引位都是合法的日期对象，从根源避免空值问题。
  补全后的参考实现：

getMonthDaysGrid() {
  const totalLastMonthDays = this.getFirstDayOfMonth().dayNumber;
  const totalCurrentMonthDays = this.month.numberOfDays;
  const totalDays = totalCurrentMonthDays + totalLastMonthDays;
  // 按7天一行凑齐整行网格
  const totalGridDays = Math.ceil(totalDays / 7) * 7;
  const monthList = [];

  // 填充上月末尾占位日期
  for (let i = totalLastMonthDays; i > 0; i--) {
    // 替换为你项目里的上月日期计算逻辑
    monthList.push({
      date: /* 上月对应日期值 */,
      month: /* 上月名称 */,
      year: /* 上月年份 */,
      isCurrentMonth: false
    });
  }

  // 填充当月正式日期
  for (let i = 1; i <= totalCurrentMonthDays; i++) {
    monthList.push({
      date: i,
      month: this.month.name,
      year: this.month.year,
      isCurrentMonth: true
    });
  }

  // 填充下月开头占位日期
  const nextMonthPaddingCount = totalGridDays - monthList.length;
  for (let i = 1; i <= nextMonthPaddingCount; i++) {
    monthList.push({
      date: i,
      month: /* 下月名称 */,
      year: /* 下月年份 */,
      isCurrentMonth: false
    });
  }

  return monthList;
}

内容的提问来源于stack exchange，提问作者Ivan Parra