在vue js中对表进行排序

data() {
  return {
    tableData: [
      { name: 'John', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Bob', age: 20 }
    ]
  }
}

<table>
  <thead>
    <tr>
      <th @click="sortTable('name')">Name</th>
      <th @click="sortTable('age')">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in sortedTableData" :key="item.name">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

methods: {
  sortTable(key) {
    this.tableData.sort((a, b) => {
      return a[key] > b[key] ? 1 : -1;
    });
  }
},
computed: {
  sortedTableData() {
    return this.tableData;
  }
}