Компонент Vue приводит к бесконечному циклу при обновлении данных - PullRequest
Новая
       59

Компонент Vue приводит к бесконечному циклу при обновлении данных

1 голос
/ 22 марта 2019

Всякий раз, когда я пытаюсь обновить medMins, функция выдает правильные результаты дважды. Тем не менее, Vue возвращается с

[Vue warn]: у вас может быть бесконечный цикл обновления в функции рендеринга компонента.

Я попытался переключить medMins на вычисляемое свойство, но получил тот же результат. Я читал, что проблема была в том, что компонент рендерится, тогда я изменяю некоторые данные компонента, во время которых изменяются некоторые реактивные данные, вызывая их повторную визуализацию ... и т.д. Есть ли способ, которым я могу избежать этого? Могу ли я обновить medMins в этом компоненте или мне нужно каким-то другим способом? Любая помощь будет высоко ценится. 

Vue.component('day', {
    //props: ['items'] or
    props: {
        dayofweek: {
            type: Array,
            required: true
        },
        name:{
            type: String,
            default: 'Blarg'
        },
    },
    data: function() {
      return {
          medMins: 0
      }
    },
    methods: {
        updateMed: function(day) {
            this.medMins += Number(day.endTimeMillis/60000).toFixed()-Number(day.startTimeMillis/60000).toFixed()
        }
    },
    template: ''+
        '         <div>'+
        '           <h1>{{name}}</h1>\n' +
        '            <div class = "row">\n' +
        '                <div class ="col" v-for="day in dayofweek">{{day.activityType}}' +
        '                   <div v-if="`${day.activityType}` == 45" v-on="updateMed(day)"></div>' +
        '                </div>' +
        '            </div>' +
        '            <h1>{{medMins}}</h1>'+
        '         </div>',
    computed: {

    }
});

Ответы [ 2 ]

1 голос
/ 24 марта 2019

Похоже, вы просто хотите вычисленное свойство для medMins.Примерно так: 

// no need for "data" as far as I can see
computed: {
  medMins () {
    return this.dayofweek.reduce((medMins, { activityType, endTimeMillis, startTimeMillis }) => {
      if (activityType == 45) {
        medMins += Number(endTimeMillis/60000).toFixed()-Number(startTimeMillis/60000).toFixed()
      }
      return medMins
    }, 0)
  }
},
template: `
    <div>
      <h1>{{name}}</h1>
      <div class = "row">
        <div class="col" v-for="day in dayofweek">
          {{day.activityType}}
        </div>
      </div>
      <h1>{{medMins}}</h1>
    </div>
`

Будет получено число для medMins, которое рассчитывает ваши итоги для всех типов деятельности 45.

1 голос
/ 22 марта 2019

В мире Vue v-on является прослушивателем событий, но вам нужно указать, какое событие типа вам нужно прослушивать.

Скажем, если это событие click, тогда 

v-on:click="updateMed(day)"

Надеюсь, это поможет!

...