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

Question

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?

Phil · Accepted Answer · 2018-09-24 03:44:12Z

2

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.

answered Sep 24, 2018 at 3:44

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1