how to accept new value?

[dom082186]

No description provided.

[Memuya]

Any update on this? I want to allow the user to be able to use their new value if it doesn't already exists in the result set.

[vollyimnetz]

I wonder this myself - and came up with the following solution:

<template>
    <v-autocomplete
        v-model="tagsActive"
        :items="tags"
        :search-input.sync="searchtext"
        chips
        small
        dense
        small-chips
        item-text="name"
        item-value="name"
        multiple
        class="tagbar"
        @keyup.enter="addSearchEntry"
        @change="change"
    >
        <template v-slot:selection="data">
            <v-chip :selected="data.selected" close class="chip--select-multi" @input="remove(data.item)">
                {{ data.item.name }}
            </v-chip>
        </template>

        <template v-slot:item="data">
            <template>
                <v-list-tile-content>
                    <v-list-tile-title v-html="data.item.name"></v-list-tile-title>
                </v-list-tile-content>
            </template>
        </template>
    </v-autocomplete>
</template>

<script>
export default {
    data: () => ({
        searchtext: "",
        tagsActive: ["Todo"],
        tags: [
            { name: "Trevor Hansen" },
            { name: "Todo" },
            { name: "Tucker Smith" },
            { name: "Britta Holt" },
            { name: "Jane Smith " },
            { name: "John Smith" },
            { name: "Sandra Williams" },
        ],
    }),
    methods: {
        change() {
            this.searchtext = "";
        },
        addSearchEntry() {
            if(this.searchtext!=="" && this.searchtext!==null) {
                this.tags.push( { name:this.searchtext+"", new:true } );
                this.tagsActive.push( this.searchtext+"" );
                this.searchtext = "";
            }
        },
        remove(item) {
            const index = this.tagsActive.indexOf(item.name);
            if (index >= 0) this.tagsActive.splice(index, 1);
        }
    }
};
</script>

@change ist called when an item is added by the autocomplete (@keyup.enter may be called afterwards - therefore we have to set the searchinput to null/empty

@keyup.enter is called when user added an entry that is not jet present (in this case @change is not called)

Attention: not proper tested on mobile