Vuetify v0.17.6: v-select에서 자동 완성 텍스트를 가져오는 방법

Vuetify v0.17.6: v-select에서 자동 완성 텍스트를 가져오는 방법

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:

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

더하다searchInput변하기 쉬운data

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

예제 펜

또, 「지연」이라고 생각되는 경우는, 그 이유가 있습니다.debounce-search 200밀리초의 지연이 추가됩니다.값이 변경될 때마다 값을 캐치하려면 이 값을 0으로 변경할 수 있습니다.

:debounce-search="0"

템플릿:

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

스크립트에서

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

Vuetify에서 더 효율적인 방법이 있을지는 모르겠지만, 그냥 사용할 수 있어야 합니다.v-on:input=handleInput와 함께handleInput메서드(또는 기타)를 사용하여 값을 수신합니다.

언급URL : https://stackoverflow.com/questions/48500587/vuetify-v0-17-6-how-to-get-the-autocomplete-text-inside-v-select