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循环中的每个单元格写入大小等级。我希望获得循环对象的索引并使用它从config对象中检索类，该对象用于填充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数组的每个项目也将具有例如{{ 1}}用于访问key对象的值的属性：

skill

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

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

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

1 个答案: