[Vuejs]-Accessing $index of outer v-repeat directive in inner v-repeat directive

by

2👍

✅

I don’t know if it’s possible to access the fruit $index inside the inner v-repeat, but you could try something like this:

<table>
  <tr>
    <th>Fruits</th>
    <th>Summer</th> 
    <th>Winter</th>
  </tr>
  <tr v-repeat="fruit: fruits">
    <td v-text="fruit"></td>
    <td v-repeat="season: seasons" v-text="isAvailable(fruit, season)"></td>
  </tr>
</table>

and

data: {
    fruits: [
        'apple', 'orange', 'banana'
    ],
    seasons: [
        'summer', 'winter'
    ],
    available: {
        summer: ['yes', 'no', 'yes'],
        winter: ['yes', 'no', 'no']
    }
},

methods: {
    isAvailable: function (fruit, season) {
        var fruitIndex = this.fruits.indexOf(fruit)
        return this.available[season][fruitIndex]
    }
}

http://codepen.io/pespantelis/pen/BozNWm

👤Pantelis Peslis

Leave a comment