Accessing $index of outer v-repeat directive in inner v-repeat directive - html-table

Question

Here is the simplified example of data I am working with. fruits:['apple','orange','banana'] which is dynamic. The number and types of fruits are not same always.
I have another list seasons:['summer','winter'] which is also dynamic. The number and type of seasons are also not same always.
I need to generate a table. The table has one row for each of the fruit. There will be one column for each season in the table.
For the values of seasons columns I have another object like this:
available: {
summer: ['yes', 'no', 'yes'],
winter: ['yes', 'no', 'no']
}
After the table is generated it would look like this:
Fruits Summer Winter
Apple yes yes
orange no no
Banana yes no
To render this in vue I am using this:
<tr v-repeat="fruit: fruits">
<td v-text="fruit"></td>
<td v-repeat="season: seasons" v-text="available[season][$index]"></td>
</tr>
The problem here is $index gives the index of seasons object. But I need to access the index of fruits object.
How can I access index of fruits object inside inner v-repeat?

Answer 1

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