[Vuejs]-Include additional data/value in Vuejs v-for loop

by

0👍

I don’t know if I understood your question properly, but you can also just modify the data right away.

Let’s say you have your own data and make a call to the API when the component is created. What you can do is:

import persons from '@/data/persons'

export default {
 data() {
  return {
    dataToLoop: []
  }
 },
 async created() {
   const timeData = await yourApiCall();
   
  let results = [];

  for (let i in persons) {
    results.push({
      ...persons[i],
      time: timeData[i] // or whatever key matches the person
    })
  }

  this.dataToLoop = results;

 }
}

And then all you need to do is loop through "dataToLoop" in your component.

Leave a comment