重構表的對象數組

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>