0
413
ViewsTypeError: 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?
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question