[Vuejs]-Vue v-bind – access array object from another array loop

by

2👍

✅

To set class from a variable/property you have two options:

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

No need for curly braces here since v-bind already expects JS expression.

Update:

What you can also do, is to associate keys of skill object (name, owner, complexity, description) with their header, so each item of headers array will also have for example key property used to access value from skill object:

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

Thus, your code can be simplified the following way:

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

Leave a comment