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?

1 answer

  • answered 2018-09-24 03:44 Phil

    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.