Vue бесконечный цикл ... в методе

Question

Я получаю это предупреждение [Vue warn]: You may have an infinite update loop in a component render function. и думаю, что знаю, почему это происходит.

Мой вариант использования: У меня есть цикл, в котором я передаю объект с индексом в метод vue. Поскольку computed не может иметь аргументы, поэтому я не могу его использовать. Оставшаяся опция - метод.

Я пытаюсь увеличить дату на одну неделю после того, как цикл достигает нечетного числа. Только 1 и 2 является исключением.

Вот мой код, который я пытался использовать

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 line is the problem and causes the infinite loop problem.  

         }
      }

      return res

  }

Здесь date.startingDate всегда является фиксированной датой.

Пример ввода

date.startingDate='2018-05-11'

так что когда i=1, and 2 (i always starts from 1) выход положен date.startingDate='2018-05-11'

, когда i=3,4 дата должна увеличиться на одну неделю, поэтому ожидаемый результат - 2018-05-17

Проблема в date.startingDate=res Я не могу сбросить дату на эту. Но я должен сбросить его на увеличенную новую дату, чтобы иметь возможность добавить новую дату, когда i=5,6 or bla bla.

Какие-либо предлагаемые решения другими способами или, может быть, этот код может быть улучшен другими способами? Любая помощь будет высоко оценен.

Большое спасибо за время.

Редактировать

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

Answer 1

Хорошо, кажется, невозможно избежать этой проблемы.Поэтому я изменил свой подход.Я не обновлял дату при заполнении doom, вместо этого я использовал vuex store и getter.Возвращаясь из геттеров, я изменил значения там, и как только все изменения даты сделаны, я просто возвратил массив.Это работало хорошо.Вот мой код

Этот код немного изменился с точки зрения логики, так как я добавил динамические условия.Но концепция такая же.

fixture(state){
  // we can actually update here

  for(var i in state.fixture){

      var details=state.fixture[i].row
      for(var j in details){   
          //console.log(details[j].date.startingDate)

          if(state.counter==state.groupCount){  

              // increase the date 
             if(state.date){
              var currDate = new Date(state.date) 
            }else{
              var currDate = new Date(details[j].date.startingDate) 
            }

              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]
              details[j].date.startingDate=res 

              state.date=details[j].date.startingDate   

              state.counter=1

          }else{

            if(state.date){ 
              details[j].date.startingDate=state.date 
            }

            state.counter++ 
          }

      }
      state.counter=0
      state.date=''
  }

  return state.fixture
},

Надеюсь, что этот подход помогает другим.