Vue v-bind - 从另一个数组循环访问数组对象

Question

我正在做一个项目，我在其中创建了一个表格组件，该组件用于具有不同配置的多个页面。每个表的配置都在一个单独的文件中，我在其中存储每列的键、标题和大小类。

每个表体的数据来自 REST 调用，它们被动态加载、分页然后显示。

<template slot="thead">
    <tr>          
        <th v-for="item in headers" :key="item.id" :class="item.classes">{{item.title}}</th>        
    </tr>      
</template>      
<template slot="tbody">        
    <tr v-for="skill in paginatedSkills" 
        :key="skill.id" 
        v-on:click="selectRow(skill)" 
        v-bind:class="{selectedRow: selectedSkill === skill}"
    >          
        <td class="cell-l">{{skill.name}}</td>          
        <td class="cell-m">{{skill.owner}}</td>          
        <td class="cell-s">{{skill.complexity}}</td>          
        <td class="cell-full">{{skill.description}}</td>        
    </tr>      
</template>

我想要做的是避免为tbody 循环中的每个单元格编写大小类。我希望获得循环对象的索引并使用它从配置对象中检索类，该对象用于填充thead 中的单元格。

<tr v-for="(skill, index) in paginatedSkills" ...>
        <td class="{headers[index].classes}">{{skill.name}}</td>

在标题上使用索引将返回正确的项目，但作为一个字符串，显然类是不可访问的。知道如何调整它吗？

这个选项不行，编译失败

<td :class="{JSON.parse(headers[index]).classes}">{{skill.name}}</td>
<td :class="{JSON.parse(headers)[index].classes}">{{skill.name}}</td>
<td :class="{{JSON.parse(headers[index]).classes}}">{{skill.name}}</td>

Answer 1

要从变量/属性设置类，您有两个选择：

<td v-bind:class="headers[index].classes">{{skill.name}}</td>
<td :class="headers[index].classes">{{skill.name}}</td>

这里不需要大括号，因为v-bind 已经需要 JS 表达式。

更新：

您还可以做的是将skill 对象的键（名称、所有者、复杂性、描述）与其标题相关联，因此headers 数组的每个项目也将具有例如key 属性用于访问来自skill 对象的值：

headers: [
    { id: 1, classes: 'cell-l', title: 'title', key: 'name' },
    { id: 2, classes: 'cell-s', title: 'title', key: 'owner' },
    ...
]

因此，您的代码可以通过以下方式简化：

<tr v-for="skill in paginatedSkills" ...>          
    <td v-for="header in headers" v-bind:class="header.classes">{{skill[header.key]}}</td>
</tr>