我在使用 Vue JS 的数组中有两层深度,我需要一个从 0 开始并为顶部数组中的每个项目递增的索引。
这是我的 HTML:
<div v-for="member in cast"> <!--array #1-->
<input name="cast_list[@{{ memberCounter }}][actor]" value="@{{ member.actor }}">
<input name="cast_list[@{{ memberCounter }}][role]" value="@{{ member.role }}">
<div v-for="group in ensemble_groups"> <!--array #2-->
<input type="checkbox"
name="cast_list[@{{ memberCounter }}][groups][]"
value="@{{ group }}"
v-model="member.groups"
id="g-@{{ memberCounter }}-@{{ $index }}">
<label for="g-@{{ memberCounter }}-@{{ $index }}">@{{ group }}</label>
</div>
</div>
和我的 Vue JS:
data: {
ensemble_groups: [{{ ensemble_groups }}"{{ group_name }}",{{ /ensemble_groups }}],
cast: [
{{ cast_list }}
{
actor: '{{ actor }}',
role: '{{ role }}',
groups: [{{ groups }}"{{ value }}",{{ /groups }}],
counter: 0 // trying to set default value
},
{{ /cast_list }}
],
},
computed: {
memberCounter: function() {
return this.counter++;
},
},
您可以看到我正在尝试将计算属性定义为我的计数器,但它的行为并不符合我的需要。 @{{ $index }}
可以工作,除了在我的第二个数组中它被循环为 0,1,2,3
一遍又一遍,而不是快速保持增量值我的第一个数组。
最佳答案
您可以像这样为每个索引指定一个别名:
<div v-for="(firstIndex, member) in cast"> <!--array #1-->
因此,在第二个循环中,您可以调用 firstIndex
如果您使用的是 Vue 2.0,则必须颠倒索引的顺序:
<div v-for="(member, firstIndex) in cast"> <!--array #1-->
关于arrays - 如何使用 Vue JS 为嵌套数组设置增量计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39644187/