Vuetify中v-autocomplete是否存在“无过滤数据”对应的回调事件？

首先明确：Vuetify官方并未为v-autocomplete提供过滤后无匹配数据的内置事件，你可以通过以下两种方案实现需求：

方案1：自定义过滤逻辑（推荐，稳定不依赖内部实现） #

自行实现和组件默认规则一致的过滤逻辑，手动维护过滤后的结果数组，直接判断数组长度即可捕获无数据的状态。
示例代码如下：

<template>
  <v-autocomplete
    v-model="selected"
    :items="originalOptions"
    :filter="customFilter"
    label="请选择"
  />
</template>

<script setup>
import { ref, watch } from 'vue'

const selected = ref('')
// 原始下拉选项
const originalOptions = ref(['苹果', '香蕉', '橙子', '葡萄'])
// 存储过滤后的结果
const filteredOptions = ref([])

// 自定义过滤函数，逻辑和Vuetify默认过滤规则对齐
const customFilter = (item, queryText, itemText) => {
  const searchText = queryText.toLowerCase().trim()
  const optionText = itemText.toLowerCase().trim()
  
  // 每次输入触发过滤时先清空旧的过滤结果
  if (filteredOptions.value.length > 0 && searchText !== filteredOptions.value.lastSearch) {
    filteredOptions.value = []
    filteredOptions.value.lastSearch = searchText
  }

  const isMatch = optionText.includes(searchText)
  if (isMatch) {
    filteredOptions.value.push(item)
  }
  return isMatch
}

// 监听过滤结果变化，判断是否无匹配数据
watch(filteredOptions, (newList) => {
  if (newList.length === 0 && newList.lastSearch) {
    // 此处执行无数据时的业务逻辑
    console.log('当前无可用匹配数据')
  }
}, { deep: true })
</script>

方案2：通过组件实例读取内部过滤结果（不推荐，易受版本升级影响） #

你可以给v-autocomplete绑定ref，直接访问组件内部的过滤后结果属性，监听其长度即可：

• Vuetify 2版本读取路径：$refs.yourRef.filteredItems
• Vuetify 3版本读取路径：$refs.yourRef.vm.filteredItems

补充说明 #

如果你仅需要自定义无数据时的提示内容，无需额外逻辑触发，直接使用v-slot:no-data插槽即可自定义展示内容，不需要额外做事件捕获。

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