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

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

我目前有一个 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>

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

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

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

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