Include additional data/value in Vuejs v-for loop

Question

I'm trying to include external data/value into a v-for loop in VueJS. Have no idea how to go about it. Basically I have data/value in value as follows:

External Data

{{ time.one }}
{{ time.two }}

NOTE: I am receiving the data exactly as above as its coming from an API

JSON (own data)

{ 
  "persons": [
  {
    "title": "Prof",
    "name": "SomeProf"
  },
  {
    "title": "Dr",
    "name": "SomeDr"
   },
 ]
}

And the loop is basic v-for loop

<ul v-for="person in persons">
   <li> {{ person.title }}{{ person.name }}  -  <!-- Inc. external data {{ time.one }} -->
</ul>

The end result being:

• Prof. SomeProf - 10:00pm
• Dr. SomeDr - 09:00am

Thank You

Answer 1

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.