iterating over multiple table rows with v-for - vue.js

Question

In a Vue app, I want to render multiple table rows for each item in a collection. Currently the (simplified) markup that renders the table body is
<tbody>
<template v-for="item in collection">
<tr>
<td>{{item.foo}}</td>
<td>{{item.bar}}</td>
</tr>
<tr>
<td>{{item.foo2}}</td>
<td>{{item.bar2}}</td>
</tr>
</template>
<tbody>
However, the problem with this is that there's no key defined, if I try to add one with
<template v-for="item in collection" :key="item.id">
Then I get an eslint error informing me that keys are only allowed on real elements. I can't replace <template> with a real element such as
<tbody>
<div v-for="item in collection" :key="item.id">
<tr>
<td>{{item.foo}}</td>
<td>{{item.bar}}</td>
</tr>
<tr>
<td>{{item.foo2}}</td>
<td>{{item.bar2}}</td>
</tr>
</div>
<tbody>
Because the only element that can be nested inside <tbody> is a <tr>. How can I add a key without violating either the HTML nesting rules or eslint rules?

Answer 1

Rather than trying to reshape the template to fit the data, you may be able to reshape the data to fit the template. Here's an example where the collection is split into an array of rows so that a simple v-for can be used with <td> elements:
<template>
<tbody>
<tr v-for="(item, index) in rows" :key="index">
<td>{{ item.column1 }}</td>
<td>{{ item.column2 }}</td>
</tr>
</tbody>
</template>
const ITEMS = [
{ foo: 'a1', bar: 'a2', foo2: 'b1', bar2: 'b2' },
{ foo: 'c1', bar: 'c1', foo2: 'd2', bar2: 'd2' },
];
export default {
data() {
return { items: ITEMS };
},
computed: {
rows() {
const result = [];
this.items.forEach(({ foo, bar, foo2, bar2 }) => {
result.push({ column1: foo, column2: bar });
result.push({ column1: foo2, column2: bar2 });
});
return result;
},
},
};