在内部 v-repeat 指令中访问外部 v-repeat 指令的 $index

Question

这是我正在使用的数据的简化示例。 fruits:['apple','orange','banana'] 这是动态的。水果的数量和种类总是不尽相同。

我还有另一个列表 seasons:['summer','winter']，它也是动态的。季节的数量和类型也不尽相同。

我需要生成一个 table。 table 每个水果一行。 table.

中每个季节都会有一列

对于季节列的值，我有另一个这样的对象：

available: {
  summer: ['yes', 'no', 'yes'],
  winter: ['yes', 'no', 'no']
}

生成 table 后，它看起来像这样：

Fruits   Summer Winter
Apple    yes    yes
orange   no     no
Banana   yes    no

为了在 vue 中渲染它，我使用了这个：

<tr v-repeat="fruit: fruits">
    <td v-text="fruit"></td>
    <td v-repeat="season: seasons" v-text="available[season][$index]"></td>
</tr>

这里的问题是$index给出了seasons对象的索引。但是我需要访问 fruits 对象的索引。

如何访问内部 v-repeat 内的 fruits 对象的 index？

Answer 1

我不知道是否可以在内部 v-repeat 中访问水果 $index，但您可以尝试这样的操作：

<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>

和

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

在内部 v-repeat 指令中访问外部 v-repeat 指令的 $index

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

html-table

vue.js