在vuejs中排序列表

<template>
  <div>
    <button @click="sortList">Sort List</button>
    <ul>
      <li v-for="item in sortedList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
      ],
    };
  },
  computed: {
    sortedList() {
      // 使用sort()方法对列表进行排序
      return this.list.sort((a, b) => a.name.localeCompare(b.name));
    },
  },
  methods: {
    sortList() {
      // 修改列表顺序
      this.list.sort((a, b) => a.name.localeCompare(b.name));
    },
  },
};
</script>