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

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

每个表体的数据来自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>

在标题上使用索引将返回正确的项，但作为字符串，因此显然类是不可访问的。知道怎么调整吗

此选项不可用，编译失败

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

{{skill.name}
{{skill.name}
{{skill.name}

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

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

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

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

{{skill[header.key]}

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

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

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

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

{{skill[header.key]}

它不工作，我收到Vue警告：渲染中出错：“TypeError:无法读取未定义的属性'classes'@dallows我刚才注意到，您可能在

标题中有4个元素，但尝试使用
paginatedSkills
的索引访问它，该索引具有不同的长度，包含不同的数据。您可能需要像这样硬编码索引：
{{{skill.name}}
这让我回到硬编码上来，只是这一次，与使用确切的类相比，发生的事情不太明显name@dallows也许不太明显，但仍然保持你的类名在一个地方。无论如何，请参见更新到应答器在更新后它工作了，这是比之前更好的解决方案它不工作了，我得到了Vue警告：渲染中出错：“TypeError:无法读取未定义的属性'classes'@dallows我刚刚注意到，在
标题
中可能有4个元素，但尝试使用
分页的索引来访问它，该索引具有不同的长度并包含不同的数据。您可能需要像这样硬编码索引：
{{{skill.name}}
这让我回到硬编码上来，只是这一次，与使用确切的类相比，发生的事情不太明显name@dallows也许不太明显，但仍然保持你的类名在一个地方。无论如何，请参阅更新后的答案更新它的工作，这是更好的解决方案比我以前