如何动态更新 v-combobox 项目列表？

Question

我使用 v-combobox 搜索 API，我想在下拉列表中显示提示，问题是最初数组 :items 是空的，当数据来自 API 时，下拉列表确实没有自动打开，我必须反复点击输入框才能看到结果

<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>

P.S：我可以使用 v-textfield 和 v-menu，但是我将无法使用键盘上的箭头来控制列表。

Answer 1

解决方案

1. 使用<v-autocomplete />代替<v-combobox />

<v-autocomplete />更适合这种操作，如Vuetify official document所述：

轻松连接动态数据并创造独特的体验。 v-autocomplete 的扩展属性列表使得微调输入的各个方面变得容易。

（摘自 v-combobox > API 搜索）

2. 从v-on:focus触发查询动作

<!- v-model:search and v-model are both present
  to preserve manual user input ->
<v-autocomplete
  v-model:search="keyword"
  v-model="select"
  :items="items"
  @focus="() => query(keyword)" />

// script
const query = async (_keyword: string) => {
  loading.value = true;
  const filteredLists = await fetchData(_keyword);
  items.value = filteredLists;
  loading.value = false;
};

完整代码

<template>
    <v-autocomplete
      v-model:search="keyword"
      v-model="select"
      :items="items"
      :loading="loading"
      @focus="() => query(keyword)"
    />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { fetchData } from '@/lib/mockedApi';

const select = ref(null);
const keyword = ref('');
const items = ref<string[]>([]);
const loading = ref(false);
const query = async (_keyword: string) => {
  loading.value = true;
  const filteredLists = await fetchData(_keyword);
  items.value = filteredLists;
  loading.value = false;
};
watch(keyword, (v) => {
  query(v);
});
</script>

编辑

我没有使用 v-autocomplete 因为当失去焦点时，值会在那里重置。

如果关键字（结果）必须独立于列表值，只需将<v-autocomplete />替换为<v-combobox />。

该演示也已相应更新。它包括组合框和自动完成的演示。

<template>
    <v-combobox
      v-model:search="keyword"
      v-model="select"
      :items="items"
      :loading="loading"
      @focus="() => query(keyword)"
    />
</template>

Github 上可用的工作演示：https://github.com/rabelais88/stackoverflow-answers/tree/main/74980402-vuetify-autocomplete