v-select 按“项目文本”排序

Question

我有一个使用 Vuetify 制作的v-select 。 如何从大到小对这个 v-select 中的项目名称进行排序？

<v-select
  v-model="selectedFruits"
  :items="fruits"
  label="Favorite Fruits"
  item-text="text"
  return-object
  multiple
>


    fruits: [ { text: 'x', id: '1'}, 
    { text: 'y', id: '2'}, 
    { text: 'a', id: '5'},
    { text: 'h', id: '4'}],

我使用排序方法但失败了。

Answer 1

这应该很好用

<template>
  <pre>{{ alphaSortedFruits }}</pre>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { text: 'x', id: '1' },
        { text: 'y', id: '2' },
        { text: 'a', id: '5' },
        { text: 'h', id: '4' },
      ],
    }
  },
  computed: {
    alphaSortedFruits() {
      return this.fruits.slice().sort((a, b) => a.text.localeCompare(b.text))
    },
  },
}
</script>

这里是游乐场。

实际结果

---

几点注意事项：

• 您不必使用localeCompare ，您也可以使用“常规排序”
• 我也在使用slice()来复制数组，我假设你不想改变原始数组
• 请记住slice正在做一个浅拷贝，如果你有一个深度嵌套的 object 你需要使用structuredClone 。 很棒的是它非常高效并且是原生的，不再需要 lodash。