作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在使用 VueJS v2.5.13 和 Vuetify v0.17.6。
我正在构建一个具有自动完成功能的选择,每当用户键入不在列表中的内容时,他们将能够看到创建新选项的操作,如下面的代码所示:
<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>
我如何使用用户自动完成文本作为标签来访问用户正在键入的文本以创建新的“快速搜索”?
最佳答案
您可以使用 :search-input.sync
来绑定(bind)它:
<v-select :search-input.sync="searchInput"
将 searchInput
变量添加到您的 data
data() {
return {
//...
searchInput: "",
};
},
另外,如果它看起来“滞后”那是因为 debounce-search
属性,它增加了 200 毫秒的延迟。如果您想在每次更改时都捕获值,则可以将其更改为 0:
:debounce-search="0"
关于javascript - 验证 v0.17.6 : How to get the autocomplete text inside v-select,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48500587/
我是一名优秀的程序员,十分优秀!