TypeError: undefined Javascript Vue V-for

I have a function that returns an array of objects like this:

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;
  }

when I try to make a v-for div like this:

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

this throw me this error:

I can’t figure how to fix it… if it loops the array, how is that I can’t access the object properties?

>Solution :

It seems like Vue is trying to access the property before it is even seem so you would have to check if it exist first or just give the day array a default value

try changing your code to

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

or to

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