如何使用Vue JS为嵌套数组设置增量计数器

Question

我在使用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而不是快速保持我的第一个数组的增量值。

Answer 1

您可以为每个索引像这样指定一个别名：

<div v-for="(firstIndex, member) in cast"> <!--array #1--> 

所以，你的第二个循环中，你如果你使用Vue公司2.0可以拨打firstIndex

，你必须扭转该指数的顺序：

<div v-for="(member, firstIndex) in cast"> <!--array #1-->