Javascript 重新构造表的对象数组

我有一个表格标题：

      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>

{{item}}
{{item[col]}

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

预期产出：

---

在内部循环中，循环通过

字段而不是
项
，然后按
键查找相应字段
：

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


{{item[col]}
这项工作非常完美