Vuetify 3：按下回车键后清空v-autocomplete并保持焦点

直接通过监听回车事件、手动更新模型并强制聚焦的方式就能解决你的问题，不需要依赖blur事件，具体实现如下：

模板代码 #

<v-autocomplete
  v-model="selectedItem"
  :items="optionsList"
  placeholder="请选择内容"
  @keydown.enter="clearAutocomplete"
  ref="autoCompleteRef"
></v-autocomplete>

脚本逻辑 #

import { ref, nextTick } from 'vue';

const selectedItem = ref(null);
const autoCompleteRef = ref(null);
const optionsList = ref(['选项A', '选项B', '选项C']);

const clearAutocomplete = async () => {
  // 清空绑定的模型值
  selectedItem.value = null;
  // 等待Vue完成DOM更新，确保占位符能正常显示
  await nextTick();
  // 获取组件内部的输入框元素并重新聚焦
  const inputEl = autoCompleteRef.value?.$el.querySelector('input');
  if (inputEl) {
    inputEl.focus();
  }
};

方案说明 #

1. 避免使用blur事件：之前依赖blur触发DOM更新会强制组件失焦，即使后续调用focusIn也无法恢复组件的活跃状态
2. 借助nextTick：清空模型后等待Vue完成DOM渲染，确保占位符能及时显示出来
3. 直接聚焦内部输入框：通过组件的ref获取内部的input元素并调用focus()，既能保持焦点，又不会让组件退出选择状态

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