Использование флага счетчика в цикле v-for

Я хочу использовать флаг счетчика в v-for внутри другого цикла v-for для подсчета общего запуска внутреннего цикла. Вот мой шаблон:

<a :href="'#/product/'+list.id" :id="ikeyCounter" v-for="item,ikey in section.list" class="movie item fcosuable">
 {{ ikeyCounterPlus() }}
  <div class="verticalImage">
   <div class="loader hideloading"></div>
   <img :src="item.thumb" alt="">
</div>
</a>

data() {
 return {
  loading: true,
  status: null,
  list: [],
  sections: null,
  ikeyCounter: 3
 }
},

И способ:

ikeyCounterPlus() {
 this.ikeyCounter++;
},

но я получаю неверный результат для переменной ikeyCounter. Идентификатор тега, начинающегося с «15003» на «15150», если я не вызываю ikeyCounterPlus () внутри тега v-for, цикл for будет работать правильно (150 запусков)


vue.js vuejs2 v-for
person M Mehdizadeh    schedule 31.07.2019    source источник
comment
Похоже на stackoverflow.com/questions/56302807. Вы не видите сообщение об ошибке бесконечной рекурсии?   -  person skirtle    schedule 31.07.2019

Ответы (2)


arrow_upward
0
arrow_downward

Вы не можете сделать это так, Vue.js - это реактивный фреймворк, и вам следует немного изучить, прежде чем задавать подобные вопросы - https://vuejs.org/v2/guide/reactivity.html

Вместо этого используйте свой key как id

person Emīls Gulbis    schedule 31.07.2019

arrow_upward
0
arrow_downward

Если вы хотите подсчитать свои объекты, просто посчитайте свои данные. Не нужно задействовать DOM.

section.list - это массив, поэтому section.list.length должен дать желаемое количество.

Кроме того, как упоминалось в ответе ранее, используйте какое-то уникальное свойство item (например, какой-то идентификатор) в качестве значения для атрибута :key.

person entio    schedule 31.07.2019