Vuetify 3 Autocomplete选择选项后下拉菜单不关闭问题求助

1. 选中选项后下拉菜单无法关闭的修复 #

当使用自定义下拉选项模板（如v-slot:item）时，Vuetify的自动关闭逻辑可能不会触发，需要手动处理：

• 给v-autocomplete添加ref属性，用于获取组件实例
• 在选项点击事件中，调用组件实例的close()方法

示例代码：

<template>
  <v-autocomplete
    ref="activityAutocomplete"
    v-model="selectedActivity"
    :items="activities"
    item-title="title"
    item-value="id"
  >
    <template v-slot:item="{ item }">
      <v-list-item @click="handleSelect(item)">
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </template>
  </v-autocomplete>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { RealActivity } from './models';

const selectedActivity = ref<RealActivity | null>(null);
const activities = ref<RealActivity[]>([]);
const activityAutocomplete = ref<InstanceType<typeof import('vuetify/lib/components/VAutocomplete/VAutocomplete').default> | null>(null);

const handleSelect = (item: RealActivity) => {
  selectedActivity.value = item;
  // 手动触发下拉关闭
  activityAutocomplete.value?.close();
  // 执行页面跳转逻辑
  window.location.href = `/activity/${item.id}`;
};
</script>

2. 筛选逻辑无视已选标题的修复 #

这个问题本质是v-model未正确绑定，导致组件内部的筛选状态未同步：

• 禁止手动修改输入框的显示文本，完全通过v-model控制输入框内容
• 如果使用自定义filter函数，确保基于v-model的值进行筛选

示例自定义筛选逻辑：

<v-autocomplete
  v-model="selectedActivity"
  :items="activities"
  :filter="customFilter"
  item-title="title"
  item-value="id"
></v-autocomplete>

<script setup lang="ts">
const customFilter = (value: string, item: RealActivity) => {
  const filterStr = value.toLowerCase();
  return item.title.toLowerCase().includes(filterStr);
};
</script>

关键注意事项 #

• 始终通过v-model同步选中状态，不要手动操作输入框的value属性
• TypeScript环境下，给ref指定正确的组件类型，避免类型错误
• 若自定义选项模板，必须在点击事件中先更新v-model，再调用关闭方法

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