Как вычислить массив при рендеринге [Vue.js] - Ошибка бесконечного цикла

#javascript #vue.js #vue-props

Вопрос:

Это мой код в родительском компоненте:

 lt;div  v-for="measurement  in measurements"  :key="measurement.id"  gt;  lt;graph-component  :value="valueOfMeasurement(measurement)"  gt;lt;/graph-componentgt;  lt;/divgt;

Я отправляю реквизиты value дочернему компоненту graph-component . :value должен отправить массив graph-component , но я получаю ошибку You may have an infinite update loop in a component render function. .

Метод valueOfMeasurement(measurement) заключается в:

 methods:{   valueOfMeasurement(measurement) {  this.arrayOfValues.length=0;  this.counter=0;    for( this.counter;this.counterlt;this.message.feeds.length;this.counter  )  {  this.arrayOfValues.push(this.message.feeds[this.counter]["field"   measurement.fieldId]);  }  return this.arrayOfValues;    } }

Я новичок в Vue.js и я предполагаю, что получаю эту ошибку, потому что я помещаю новые элементы в массив, но я не могу найти другого способа сделать это.

Ответ №1:

Вы получаете возможный бесконечный цикл, потому что вы изменяете состояние во время рендеринга. В частности, вы вызываете valueOfMeasurement метод во время визуализации (т. Е. в шаблоне), который изменяет состояние компонента ( this.arrayOfValues и this.counter ). Это вызовет повторную визуализацию Vue, которая затем снова изменит состояние и так далее бесконечно.

Почему arrayOfValues и counter местное государство? Вы просто очищаете их каждый раз, когда вызывается метод, так что, похоже, они должны быть просто локальными переменными внутри метода. Но… это зависит от lt;graph-componentgt; того, изменяет ли эти массивы; если это так, вам следует заранее вычислить все эти данные вне шаблона, возможно, при measurements первом наборе или в created крючке и т. Д.