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

Question

我正在使用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>

如何使用用户自动填充的文本作为标签来访问用户键入的文本以创建新的“快速搜索”？

Answer 1

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

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

将searchInput变量添加到您的data

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

示例笔

此外，如果由于debounce-search 性能而显得“迟钝” ，这会增加200ms的延迟。如果您希望每次更改都可以获取价值，可以将其更改为0：

:debounce-search="0"