I'm using VueJS v2.5.13 and 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?

I'm using VueJS v2.5.13 and 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?

• javascript
• vuejs2
• vuetify.js

• Is it not just the value of inputText? – user320487 Commented Jan 29, 2018 at 12:32
• Sadly it's not. As an event i'm able to get the autcomplete text if i add a callback to @change:searchInput. But i can't find a way to bind that data to a prop or variable – Simon Commented Jan 29, 2018 at 14:40

3 Answers 3

You can bind it by using :search-input.sync:

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

add searchInput variable to your data

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

example pen

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="0"

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: ""
}),

I don't know if there's a more efficient way with Vuetify, but you should be able to just use v-on:input=handleInput with a handleInput method (or whatever) to receive the value.