vue component built in v-for, use data from another related object as prop

Lets say I have too arrays that look similar too this,

const people = [{name: "Jane Doe", id: "0001"},{name: "John Doe", id:"0002"}, {name: "Sam Smith", id: "0003"}, {name: "Joe Bloggs", id:"0004"}];

const extras = [{id: "0001", data: "some data"},{id:"0002", data: "some more data"}, {id: "0003", data: "some further data" }, {id:"0004", data: "even more data"}];

I have a loop that looks like this,

<componentName v-for="p in people" :person="p" :extras="" />

I want to send the data attribute from the extras array for the appropriate id, I can’t use a computed value, as they shouldn’t take parameters, so what are my options, can I run a extras.filter on each loop?

77 thoughts on “vue component built in v-for, use data from another related object as prop”

Leave a Comment