I keep receiving this warning
[Vue warn]: You may have an infinite update loop in a component render function.My Scenario : I am passing an object with an index to a Vue method within a loop. Computed properties cannot accept arguments, so I am left with using a method.
The objective is to increment the date by one week once the loop reaches an odd number, except for 1 and 2.
Below is the code snippet I've been working on:
getDate(date, i){
var currentDate = date.startingDate;
var res = currentDate;
if(i > 2){
// change the date
if(i % 2 == 0){
//use previous dates
res = date.startingDate;
}else{
// increase the date by one week from the last week
var currDate = new Date(currentDate);
var d = currDate.setDate(currDate.getDate() + 7);
var d = new Date(d);
var newDate = d.toISOString();
var dateArr = newDate.split("T");
var res = dateArr[0];
console.log('ok');
date.startingDate = res; // this particular line is causing the infinite loop issue
}
}
return res;
}
Here, date.startingDate always holds a fixed date value.
Sample Input
date.startingDate='2018-05-11'
So when
i=1 or 2 (i always starts from 1)date.startingDate='2018-05-11'
For i=3 or 4, the date should be incremented by one week resulting in an expected output of 2018-05-17
The issue lies in the line date.startingDate=res. I need to reset the date to the newly increased value in order to add another new date when i=5,6, or more.
Are there any alternative solutions or potential improvements to this code? Any suggestions would be greatly appreciated.
Thank you for taking the time to review this.
Edit
<div class="row _6-2-1__Tou align-items-center team" v-for="(m,j) in data.row" :key="j">
<div class="col-auto _6-2-1__Tou-one pad-0" >
<ul class="_6-2-1__Tou-text">
<li>{{getDate(m.date,j+1)}}</li>
</ul>
</div>