Include additional data/value in Vuejs v-for loop - html

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.