Vuetify v0.17.6：如何在 v-select 中获取自动完成文本

Question

我正在使用 VueJS v2.5.13 和 Vuetify v0.17.6。

我正在构建一个具有自动完成功能的 select，每当用户键入不在列表中的内容时，他们将能够看到创建新选项的操作，如下面的代码所示：

<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>

我如何访问用户正在键入的文本以使用用户自动完成文本作为标签来创建新的 'quick search'？

Answer 1

我不知道 Vuetify 是否有更有效的方法，但您应该可以使用 v-on:input=handleInput 和 handleInput 方法（或其他方法）来接收值。

Answer 2

您可以使用:search-input.sync绑定它：

<v-select :search-input.sync="searchInput"

将 searchInput 变量添加到您的 data

data() {
    return {
         //...
         searchInput: "",
    };
},

example pen

此外，如果看起来 "laggy" 那是因为 debounce-search 属性，它增加了 200 毫秒的延迟。如果您想在每次更改时都捕获值，可以将其更改为 0：

:debounce-search="0"

Answer 3

在模板中：

<v-select
    :items="itemList"
    :search-input.sync="searchInput"
    item-text="name"
    autocomplete
/>

在脚本中

data: () => ({
    itemList: [{name: 'John'}, {name: 'Doe'}],
    searchInput: ""
}),

Vuetify v0.17.6：如何在 v-select 中获取自动完成文本

Vuetify v0.17.6: How to get the autocomplete text inside v-select

javascript

vuejs2

vuetify.js