重构表的对象数组

Question

我有一张表 header：

      fields: [
        'description',
        'potSize',
        'price',
      ],

我有我的表格数据：

      testArray: [
        {
          price: '10,00',
          potSize: 'C2',
          description: 'desc',
        },
        {
          price: '10,00',
          potSize: 'C2',
          description: 'rwefv ',
        },
        {
          price: '10,00',
          potSize: 'C2',
          description: '',
        },
      ],

两者都在表格组件中读取

    <thead>
      <tr>
        <th v-for="item in fields" :key="item">{{ item }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, key) in testArray" :key="key">
        <td v-for="(keys, col) in item" :key="keys">
          {{ item[col] }}
        </td>
      </tr>
    </tbody>

如您所见，header 行和数据行键不匹配。 我需要按标题顺序显示 testArray 键值对。 我怎样才能最有效地做到这一点？

预期 output：

Answer 1

在内部循环中，循环遍历fields而不是item ，然后通过key查找相应的字段：

  <tr v-for="(item, key) in testArray" :key="key">
    <td v-for="col in fields" :key="col">
      {{ item[col] }}
    </td>
  </tr>