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

Тем не менее, я хочу его производить 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

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

мне пришлось создать переменную, которая предварительно заполняется на основе agegroups следить за более ранние индексы, и я добавляю это к индексу вложенных fo r петля.