Vue2 Vuetify v-autocomplete如何获取筛选后的结果？

方法一：手动复刻筛选逻辑 #

既然直接访问filteredItems无效，可以基于当前搜索关键词，用和v-autocomplete一致的规则手动筛选原始列表：

• 先拿到当前的搜索关键词（通过绑定的v-model或$refs获取searchValue）
• 对原始列表执行过滤操作，得到和组件筛选结果一致的项
• 将这些项直接赋值给多选绑定的数组

示例代码：

// 假设原始列表为originalItems，多选绑定变量为selectedItems，搜索关键词绑定为searchText
selectFilteredAll() {
  let filtered = [...this.originalItems]
  if (this.searchText) {
    const searchKeyword = this.searchText.toLowerCase()
    // 这里假设列表项的显示字段为label，可根据实际字段调整
    filtered = filtered.filter(item => 
      item.label.toLowerCase().includes(searchKeyword)
    )
  }
  this.selectedItems = [...filtered]
}

方法二：通过DOM提取筛选后项 #

v-autocomplete的下拉列表会渲染筛选后的结果，可以直接从DOM中提取对应数据（注意：该方法依赖组件DOM结构，版本更新可能失效）：

• 给v-autocomplete添加ref="autoComplete"
• 在全选方法中，通过$refs找到下拉列表的DOM元素，提取每个列表项绑定的数据

示例代码：

selectFilteredAll() {
  const dropdownItemElements = this.$refs.autoComplete.$el.querySelectorAll('.v-list-item')
  const filteredItems = []
  dropdownItemElements.forEach(el => {
    // 从Vue实例中获取绑定的项数据
    const item = el.__vue__.item
    item && filteredItems.push(item)
  })
  this.selectedItems = [...filteredItems]
}

方法三：自定义筛选逻辑并缓存结果 #

给v-autocomplete绑定自定义筛选函数，同时缓存每次筛选后的结果，全选时直接使用缓存数据：

• 在组件中定义变量filteredResults用于缓存筛选结果
• 给v-autocomplete添加:filter="customFilter"属性，在筛选函数中更新缓存

示例代码：

data() {
  return {
    filteredResults: []
  }
},
methods: {
  customFilter(item, queryText, itemText) {
    const isMatch = itemText.toLowerCase().includes(queryText.toLowerCase())
    // 根据搜索关键词更新缓存的筛选结果
    this.filteredResults = queryText
      ? this.originalItems.filter(i => i.label.toLowerCase().includes(queryText.toLowerCase()))
      : [...this.originalItems]
    return isMatch
  },
  selectFilteredAll() {
    this.selectedItems = [...this.filteredResults]
  }
}

注意：如果使用Vue 3 + Vuetify 3，$refs的访问方式略有不同，需确保正确获取组件实例（比如通过this.$refs.autoComplete.value）。

内容的提问来源于stack exchange，提问作者Faiz Shaari