VueJS et Laravel Blade - incrémentation de compteur dans les boucles v-for imbriquées

Question

J'utilise v-for pour créer une liste de personnes à partir d'un objet, chacune avec un numéro affecté. Voici un exemple simplifié:

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> 

Ce produit 1 2 3 1 1 2

Cependant, je veux pour produire 1 2 3 4 5 6

Comment cela peut-il être fait? Il semble que cela puisse facilement être réalisé avec un simple compteur, mais où est-ce que je le mets?

Answer 1

vous allez ici: 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> 

je devais créer une variable qui est pré rempli sur la base agegroups de garder une trace de les index précédents, et je l'ajoute à l'index de fo imbriqué r boucle.