CODEWITHSUNDEEP
vue.jsvuejs2
Yann
Yann

Reputation: 198

How to access the data of the parent array when using v-for with an array in an array?

My data structure looks like this:

city: [
{
  foo1: 0,
  foo2: "Family",

  districts: [
    {
      bar1: 0,
      bar2: "event1",
    }
  ]
},

My v-for looks like this.

<div v-for="district in city.districts" :bar1="district.bar1" :foo="???"></div>

How can I pass the foo1 and foo2 from the parent array as a prop to the div of the v-for?

Upvotes: 1

Views: 65

Answers (1)

Phil
Phil

Reputation: 164766

Given your districts array is available via city.districts, I'd say you can use

<div v-for="district in city.districts"
     :bar1="district.bar1" :foo1="city.foo1" :foo2="city.foo2">
</div>

Of course, these values will be the same for each district in a city but that looks like what you want.

Upvotes: 2

Related Questions