如何使用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-->