TypeError: undefined Javascript Vue V-for

Question

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?

By the looks of it, your array has an element 0, which probably never gets filled. — Guido Faecke
– Guido Faecke, Commented Jun 26, 2022 at 21:48
If i put this <div v-for="(day, idx) in cal.getMonthDaysGrid()" :key="idx"> <p> {{ day }} </p> </div> it shows the object... but when i point a property it shows error — Ivan Parra
– Ivan Parra, Commented Jun 26, 2022 at 21:54

Jackie Santana · Accepted Answer · 2022-06-26 21:55:23Z

3

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>

answered Jun 26, 2022 at 21:55

Jackie Santana

1,51817 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jackie Santana Over a year ago

I go thru this all the in react when fetching api calls, so I was very familiar with this situation. No problem.

Collectives™ on Stack Overflow

TypeError: undefined Javascript Vue V-for

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related