我使用 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
一遍又一遍,而不是紧紧抓住我的第一个数组的增量值。