在内部v-repeat指令

时间:2015-09-19 14:58:26

标签: html-table vue.js

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

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

我需要生成一个表。每个水果的桌子都有一排。表中每个季节都会有一列。

对于Seasons列的值,我有另一个这样的对象:

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

生成表后,它将如下所示:

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对象的索引。

如何访问内部index内的fruitsv-repeat对象?

0 个答案:

没有答案