javascript - 类型错误 : undefined Javascript Vue V-for

Question

我有一个返回对象数组的函数，如下所示:

getMonthDaysGrid() {
    const totalLastMonthDays = this.getFirstDayOfMonth().dayNumber;
    const totalDays = this.month.numberOfDays + totalLastMonthDays;
    const monthList = Array.from({ length: totalDays });

    for (let i = totalLastMonthDays; i < totalDays; i++) {
      monthList[i] = {
        date: i - totalLastMonthDays + 1,
        month: this.month.name,
        year: this.month.year,
      };
    }

    return monthList;
  }

当我尝试制作这样的 v-for div 时:

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

这给我带来了这个错误:

我不知道如何修复它...如果它循环数组，我怎么无法访问对象属性？

Answer 1

看起来 Vue 正在尝试在属性出现之前访问该属性，因此您必须先检查它是否存在，或者只是为 day 数组提供默认值

尝试将代码更改为

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

或到

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