当要排序的值是计算结果时如何在Vue中对列进行排序

Question

我找到了许多用于对已经在数组中的数据进行排序的资源，但在对动态生成的数据进行排序时却找不到任何东西。

<table>
    <thead>
      <tr>
        <th>Program</th>
        <th>Rewards</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="program in programs" :key="program.id">
        <td>{{ program.program_name }}</td>
        <td>{{ pointValue(program) | percent }}</td>
      </tr>
    </tbody>
  </table>

pointValue() 是一种计算并返回显示为 % 的值的方法。 这是奖励栏。 我希望表格可以按程序和奖励排序。 （程序只是一个字符串）。

Answer 1

使用map和sort方法为程序创建计算数组并对其进行迭代

computed: {
  computedPrograms() {
    return this.programs
      .map(program => {
        return {
           ...program,
           value: this.pointValue(program)
        }
      })
      .sort((a, b) => a.value - b.value)
  }
}

<tr v-for="program in computedPrograms" :key="program.id">
  <td>{{ program.program_name }}</td>
  <td>{{ program.value | percent }}</td>
</tr>