VueJS 및 Laravel Blade - 중첩 된 v-for 루프의 카운터 증가

Question

v-for를 사용하여 각 번호가 할당 된 개체의 사람들 목록을 만듭니다.

home.js :

가

data: function() { 
     return { 
      agegroups: { 
       adult: 3, 
       child: 1, 
       infant: 2 
      } 
     } 
    }, 

home.blade.php :

<ul> 
    <template v-for="(num, agegroup) in agegroups"> 
     <li v-for="index in num"> 
      @{{ index }} 
     </li> 
    </template> 
</ul> 

이 단 1 2 3 1 2

를 생산 I 원하는 여기 간단한 예는 그것을 생산 1 2 3 4 5 6

이것은 어떻게 할 수 있습니까? 그것은 간단한 카운터로 쉽게 얻을 수있는 것처럼 보이지만, 어디에 넣어야합니까? 여기

Answer 1

당신은 갈 : https://jsfiddle.net/mimani/7o4k0gf2/

JS

new Vue({ 
    el: '#app', 
    mounted() { 
    var sum = 0 
    for (const key of Object.keys(this.agegroups)) { 
     sum += this.agegroups[key] 
     this.offset.push(sum) 
     } 
    }, 
    data: { 
    agegroups: { 
     adult: 3, 
     child: 1, 
     infant: 2 
    }, 
    offset: [0] 
    } 
}); 

HTML 나는 추적 할 agegroups에 따라 미리 입력하는 변수를 생성했다

<ul> 
    <template v-for="(num, agegroup, idx) in agegroups" v-init="getOffset(num)"> 
     <li v-for="index in num"> 
     {{offset[idx] + index}} 
     </li> 
    </template> 
    </ul> 

이전 색인, 그리고 이것을 중첩 된 fo의 색인에 추가합니다. r 루프.