如何动态更新v-combobox选项列表？API返回数据后下拉未自动展开

问题场景 #

使用v-combobox结合API实现搜索功能，初始状态下items数组为空；当API返回数据后，下拉列表不会自动展开，需要多次点击输入框才能查看搜索结果。尝试过用v-textfield和v-menu组合实现，但无法通过键盘箭头键控制列表选择。

原代码示例 #

<script setup>
const inputValue = ref('')
const items = ref([])

watch(inputValue, async value => {
  const response = await fetch('...')
  items.value = await response.json()
})
</script>

<template>
  <v-combobox
    v-model="inputValue"
    :items="items"
  >   
  </v-combobox>
</template>

解决方案 #

核心思路是手动控制v-combobox的菜单展开状态，在异步数据加载完成后主动触发下拉列表展开，同时保留组件原生的键盘交互能力。

完整代码实现 #

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

const inputValue = ref('')
const items = ref([])
const comboboxRef = ref(null) // 获取组件实例引用

watch(inputValue, async value => {
  // 清空输入时重置数据并关闭菜单
  if (!value.trim()) {
    items.value = []
    comboboxRef.value?.menu = false
    return
  }

  // 发起API请求获取搜索结果
  const response = await fetch('...')
  items.value = await response.json()

  // 数据加载完成且有结果时，强制展开下拉菜单
  if (items.value.length > 0 && comboboxRef.value) {
    comboboxRef.value.menu = true
  }
})
</script>

<template>
  <v-combobox
    ref="comboboxRef"
    v-model="inputValue"
    :items="items"
    :loading="items.length === 0 && inputValue.trim() !== ''" <!-- 可选：添加加载状态提示 -->
  >   
  </v-combobox>
</template>

关键说明 #

1. 通过ref获取v-combobox实例，直接控制其menu属性来切换下拉列表的展开/收起状态。
2. 增加输入框清空时的逻辑，避免空值状态下菜单误展开。
3. 可选添加loading属性，在API请求过程中给用户加载反馈，提升交互体验。

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