vue.js for排序

<template>
  <table>
    <thead>
      <tr>
        <th @click="sort('name')">Name</th>
        <th @click="sort('age')">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="person in sortedPeople" :key="person.id">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const people = ref([
      { id: 1, name: 'Alice', age: 30 },
      { id: 2, name: 'Bob', age: 25 },
      // ... more people
    ]);
    const sortKey = ref('');
    const sortOrder = ref(1); // 1 for ascending, -1 for descending

    const sortedPeople = computed(() => {
      return [...people.value].sort((a, b) => {
        if (a[sortKey.value] < b[sortKey.value]) return -1 * sortOrder.value;
        if (a[sortKey.value] > b[sortKey.value]) return 1 * sortOrder.value;
        return 0;
      });
    });

    function sort(key) {
      if (sortKey.value === key) {
        sortOrder.value *= -1; // toggle sort order
      } else {
        sortKey.value = key;
        sortOrder.value = 1; // default to ascending
      }
    }

    return { sortedPeople, sort };
  }
};
</script>