如何让Vuetify v-autocomplete组件表现得像搜索栏？

要实现聚焦不展开下拉、仅按回车显示菜单的效果，可以通过控制菜单的显示状态并监听相应事件来完成，具体实现如下：

核心思路 #

利用v-autocomplete的菜单控制属性（Vuetify 3用menu-props，Vuetify 2用is-menu-active）绑定状态变量，通过监听焦点事件阻止默认展开行为，监听回车事件手动触发菜单显示。

Vuetify 3 实现代码 #

<template>
  <v-autocomplete
    v-model="searchQuery"
    :items="items"
    :menu-props="{ value: showMenu }"
    @focus="handleFocus"
    @keydown.enter="handleEnter"
    @menu:close="showMenu = false"
    placeholder="输入关键词后按回车搜索..."
  ></v-autocomplete>
</template>

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

const searchQuery = ref('')
const showMenu = ref(false)
// 示例选项，可根据实际需求通过API请求动态更新
const items = ref(['前端开发', '后端开发', 'UI设计', '产品经理'])

const handleFocus = () => {
  // 聚焦时强制关闭菜单，覆盖默认展开行为
  showMenu.value = false
}

const handleEnter = () => {
  // 按下回车时展开菜单
  showMenu.value = true
  // 这里可添加自定义搜索逻辑，比如根据searchQuery请求后端数据更新items
  // fetch(`/api/search?q=${searchQuery.value}`).then(res => res.json()).then(data => items.value = data)
}
</script>

Vuetify 2 实现代码 #

<template>
  <v-autocomplete
    v-model="searchQuery"
    :items="items"
    :is-menu-active="showMenu"
    @focus="handleFocus"
    @keydown.enter="handleEnter"
    @menu:close="showMenu = false"
    placeholder="输入关键词后按回车搜索..."
  ></v-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      showMenu: false,
      items: ['前端开发', '后端开发', 'UI设计', '产品经理']
    }
  },
  methods: {
    handleFocus() {
      this.showMenu = false
    },
    handleEnter() {
      this.showMenu = true
      // 自定义搜索逻辑示例
      // this.$axios.get(`/api/search?q=${this.searchQuery}`).then(res => this.items = res.data)
    }
  }
}
</script>

关键说明 #

• 菜单状态控制：通过showMenu变量直接绑定菜单的显示状态，完全掌控菜单的展开/关闭时机。
• 焦点事件处理：聚焦时强制将showMenu设为false，阻止组件默认的聚焦展开行为。
• 回车事件触发：监听回车事件，手动将showMenu设为true，同时可在这里触发数据请求，动态更新下拉选项。
• 状态同步：监听menu:close事件，在菜单关闭时同步更新showMenu状态，确保下次操作的正确性。

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