Question

我想在另一个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变量上得到了错误的结果。标签的ID从“ 15003”到“ 15150”开始，如果我不在v-for标签内调用ikeyCounterPlus（），for循环将正确运行（150运行）

Answer 1

您不能做到这一点，Vue.js是反应性框架，在问这类问题之前，您应该学一点点-https://vuejs.org/v2/guide/reactivity.html

将您的key用作id

Answer 2

如果要计数对象，则只需计数数据。无需涉及DOM。

section.list是一个数组，因此section.list.length应该可以为您提供所需的计数。

也如前面的答案中所述，使用item的某些唯一属性（例如某种ID）作为:key属性的值。

在v-for循环中使用计数器标志

2 个答案: