Question

在Vue应用程序中，我想为集合中的每个项目渲染多个表行。目前，呈现表格主体的（简化）标记是

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

但是，这样做的问题是，如果我尝试添加一个键，则没有定义键

<template v-for="item in collection" :key="item.id">

然后我得到一个错误提示，通知我键只允许在真实元素上使用。我无法用

这样的真实元素替换<template>

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

因为可以嵌套在<tbody>中的唯一元素是<tr>。如何在不违反HTML嵌套规则或eslint规则的情况下添加键？

Answer 1

您可能无需重塑模板以适合数据，而是可以重塑数据以适合模板。这是一个示例，其中将集合拆分为rows的数组，以便可以将简单的v-for与<td>元素一起使用：

<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;
    },
  },
};

用v-for遍历多个表行

1 个答案: