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

Question

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?

Answer 1

Did you consider combining data before you pass it to the vue component

const combined = people.map(person => ({
   ...person,
   extras: extras.filter(({id}) => id === person.id).data
}));

// This will give you
[
   {
      id: '001',
      name: "Jane Doe",
      extras: [
         {
            id: '001',
            data: "more data"
         },
         {
            id: '001',
            data: "even more data"
         }
      ]
   }
]