[Vuejs]-Vue JS – Looping through components

by

2👍

You could create an array of statistics objects, and loop them.

for example in VueX Store:

statistics: [
 {
   title: 'kilometers',
   number: 12,
   type: 'GELOPEN'
 },
 {
   title: 'kilometers',
   number: 5,
   type: 'GELOPEN'
 }
]

*The data is requested from School.vue and from here the data in the store is mutated. In Statistics.vue the data is a computed property called schoolOnepager that import the statistics data from the VueX store

and then refactor your template components:

<StatisticsCard v-for="(statistic, i) in statistics" key="i" :imageUrl="require('@/assets/img/images/img_stats_km@2x.png')"
                  :title="statistic.title"
                  :number="statistic.number"
                  :type="statistic.type"/>
👤jcmortensen

1👍

You can directly use v-for on a custom component, like any normal element:

<StatisticsCard v-for="(item, index) in items" :key="index"
 :title="'kilometers'"
 :number="item.kilometers"
 :type="item.type"
></StatisticsCard>

provided your items array should be like

[
 {
   title: 'kilometers',
   type: 'stunk'
},
{
   title: 'hgdfb',
   type: 'dvnvffv'
},
......
]
👤Amaarockz

Leave a comment