Vue JSを使用してネストされた配列のインクリメンタルカウンタを設定する方法

Question

Vue JSを使用して2つの深さの配列があり、先頭の配列の各項目に対して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 }}は、私の2番目の配列以外では、最初の配列のインクリメンタルな値を高速に保持するのではなく、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-->