CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Ivan Parra
Ivan Parra

Reputation: 660

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:

enter image description here

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

Upvotes: 2

Views: 647

Answers (1)

Jackie Santana
Jackie Santana

Reputation: 1458

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>

Upvotes: 3

Related Questions