如何反转Vuetify v-autocomplete组件的筛选结果排序？

你的问题核心是要区分「无搜索时的初始降序展示」和「有搜索时的升序筛选结果」，之前的实现有两个关键问题：一是watch被错误放在data中（无效），二是直接修改组件内部的filteredItems会打乱原始数组状态。

以下是可行的实现方案：

实现思路 #

1. 维护一份升序的原始数据数组，作为筛选的基准
2. 通过计算属性displayItems动态返回展示内容：
   • 无搜索输入时，返回原始数组的反转（即初始降序）
   • 有搜索输入时，筛选原始数组并返回升序结果（因为原始数组本身是升序，直接返回筛选结果即可）

完整代码示例 #

模板部分 #

<v-autocomplete
  v-model="searchText"
  :items="displayItems"
  label="search"
  :search-input.sync="filter"
></v-autocomplete>

脚本部分 #

export default {
  data() {
    return {
      searchText: '',
      filter: '',
      // 升序的原始数据（用字符串避免数字相等问题，比如1.1和1.10会被JS视为相同数字）
      rawItems: ['1.1', '1.6', '1.9', '1.10', '1.11', '2.9', '2.10']
    }
  },
  computed: {
    displayItems() {
      // 无搜索输入时，返回降序数组
      if (!this.filter.trim()) {
        // 用扩展运算符创建新数组，避免修改原始数据
        return [...this.rawItems].reverse()
      }

      // 有搜索输入时，筛选后返回升序结果
      return this.rawItems.filter(item => {
        return item.includes(this.filter)
      })
    }
  }
}

关键说明 #

• 避免直接操作组件内部的filteredItems：Vuetify的v-autocomplete内部维护的数组不建议直接修改，容易导致状态不一致
• 用计算属性动态控制展示内容：比watch更简洁，且能自动响应filter的变化
• 处理数字/字符串问题：如果你的数据是数字类型，1.1和1.10会被视为相等，所以建议用字符串存储这些值，保证筛选逻辑符合预期

内容的提问来源于stack exchange，提问作者JC Lopez