在输入 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)}
我目前有一个 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)}