在输入 vuetify 之前，不要在 v-autocomplete 中显示选项

Question

我目前有一个 v-autocomplete 组件，但一旦用户单击搜索，它就会展开并显示所有可用项目。我希望项目列表仅在有输入后显示。可用项目太多，不希望用户立即看到所有项目。此外，如果有一种方法可以将其限制为仅显示与用户输入匹配的前 5 个。

<v-autocomplete class="vtext"
            v-model="selectedTopic"
            :items="getTopics"
            item-text="Name"
            item-value="Id"
            :outlined="false"
            :rounded="true"
            :solo="true"
            :single-line="true"
            append-icon='fa fa-search'
            @change="topicSelected()"
            :hide-no-data="true"
            :allow-overflow="false"
            no-data-text="No topic found"
            return-object
        >
        </v-autocomplete>

Answer 1

它在初始化时显示所有项目的原因（当点击清空时），是因为您正在使用 getTopics 立即设置项目，您需要在该功能中做的是检查

<v-autocomplete class="vtext"
...
@input="handleInput"
if (inputModel){ //get the topics}
else { return []}

就只获得前 5 个结果而言，您再次在同一函数中执行此操作：

if (inputModel){
// do search
return results.slice(0,5)}

在输入 vuetify 之前，不要在 v-autocomplete 中显示选项

Do not display options in v-autocomplete until there is input vuetify

list

vue.js

drop-down-menu

vuetify.js

v-autocomplete