list - 在输入 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)}