[英]Vuetify v0.17.6: How to get the autocomplete text inside v-select
I'm using VueJS v2.5.13 and Vuetify v0.17.6. 我正在使用VueJS v2.5.13和Vuetify v0.17.6。
I'm building a select with autocomplete functionality and whenever the user types something that's not on the list they'll be able to see a action to create a new option as the code below shows: 我正在构建一个具有自动完成功能的选择,每当用户键入不在列表中的内容时,他们将能够看到创建新选项的操作,如下面的代码所示:
<template>
<v-select prepend-icon="view_list" :items="options" label="Quick searches" v-model="selected" item-text="label" autocomplete :search-value="inputText" clearable dense>
<template slot="item" slot-scope="data">
<v-flex xs12>
<v-layout>
<v-layout justify-start fill-height align-content-center>
<span>{{data.item.label}}</span>
</v-layout>
<v-layout justify-end row>
<v-icon color="success" @click="edit(data)">mod_edit</v-icon>
<v-icon color="error" @click="del(data)">delete_forever</v-icon>
</v-layout>
</v-layout>
</v-flex>
</template>
<template slot="no-data">
<v-container>
<v-layout row>
<v-layout justify-start fill-height align-content-center>
Create new search
</v-layout>
<v-layout justify-end>
<v-icon color="success" @click="create()">add</v-icon>
</v-layout>
</v-layout>
</v-container>
</template>
</v-select>
How can i access the text the user is typing to create a new 'quick search' using the user autocomplete text as label? 如何使用用户自动填充文本作为标签来访问用户键入的文本以创建新的“快速搜索”?
You can bind it by using :search-input.sync
: 您可以使用:search-input.sync
绑定它:search-input.sync
:
<v-select :search-input.sync="searchInput"
add searchInput
variable to your data
将searchInput
变量添加到您的data
data() {
return {
//...
searchInput: "",
};
},
Additionally, if it seems "laggy" that's because of debounce-search
property, which adds 200ms delay. 此外,如果看起来“滞后”,那是因为debounce-search
属性,这会增加200毫秒的延迟。 You can change it to 0 if you want to catch value every time it's changed: 如果要在每次更改时捕获值,可以将其更改为0:
:debounce-search="0"
In the template: 在模板中:
<v-select
:items="itemList"
:search-input.sync="searchInput"
item-text="name"
autocomplete
/>
In the script 在脚本中
data: () => ({
itemList: [{name: 'John'}, {name: 'Doe'}],
searchInput: ""
}),
我不知道Vuetify是否有更高效的方法,但你应该能够使用v-on:input=handleInput
和handleInput
方法(或其他)来接收值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.