javascript Vuetify v0.17.6：如何在 v-select 中获取自动完成文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48500587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuetify v0.17.6: How to get the autocomplete text inside v-select
提问by Simon
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?
如何使用用户自动完成文本作为标签访问用户输入的文本以创建新的“快速搜索”？
回答by Traxo
You can bind it by using :search-input.sync:
您可以使用:search-input.sync以下方法绑定它：
<v-select :search-input.sync="searchInput"
add searchInputvariable to your data
将searchInput变量添加到您的data
data() {
return {
//...
searchInput: "",
};
},
Additionally, if it seems "laggy" that's because of debounce-search
property, which adds 200ms delay. You can change it to 0 if you want to catch value every time it's changed:
此外，如果它看起来“滞后”，那是因为debounce-search
属性，这会增加 200 毫秒的延迟。如果您想在每次更改时捕获值，您可以将其更改为 0：
:debounce-search="0"
回答by Rapando
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: ""
}),
回答by Appurist - Paul W
I don't know if there's a more efficient way with Vuetify, but you should be able to just use v-on:input=handleInputwith a handleInputmethod (or whatever) to receive the value.
我不知道是否有与Vuetify更有效的方式，但你应该能够只使用v-on:input=handleInput一个handleInput方法（或其他），以获得的价值。
