Vue JS를 사용하여 중첩 된 배열에 증분 카운터를 설정하는 방법

Question

Vue JS를 사용하는 배열에서 두 레벨 깊이이므로 0부터 시작하여 맨 위 배열의 각 항목에 대해 증가하는 인덱스가 필요합니다.

<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> 

내 뷰 JS : 여기

내 HTML입니다

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

: 당신이 뷰 2.0을 사용하는 경우

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

그래서, 두 번째 루프 내에서 당신이 firstIndex

를 호출 할 수 있습니다, 당신은 역 할 색인 순서 :

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