Vuetify 2.1 V-Select reset or clear selection after change

Question

i have to fix a vuetify custom component that extends from Vue Class and includes a V-Select component. The dropdown is working fine but since its just a trigger pad to pop open modals the requirement is to reset/clear the dropdown selection after onchange event. basically i think i need to trigger the clearableCallback but i am not sure how to do it. First of all i have the problem that when i bind a method from the parent component the scope is always the parent so this refers to the extend parent component class. so i wonder how to get into the scope of the v-select component. i can not see apart from the clearable prop there is no native functionality for what i am trying to do. any hints? thanks

Set the `v-model` value of the `v-select` to `-1`? – seantunwin Dec 09 '19 at 17:34 — seantunwin, Dec 09 '19 at 17:34
makes sense. was not aware of the binding capabilities – setcookie Dec 10 '19 at 07:35 — setcookie, Dec 10 '19 at 07:35

score 7 · Accepted Answer · answered Dec 10 '19 at 01:34

7

I am not sure I fully understand your question, but if I do, you may try using @change event on the v-select and use a method in which you open modals and reset the value of the v-select model to any desired one.

<v-select 
    v-model="select"
    @change="someMethod"
>
</v-select>

...

methods: {
    someMethod(){
        this.openModal(this.select);
        this.select = 0;
}

answered Dec 10 '19 at 01:34

uatar

395
3
10

1

yes that works. didnt know that the value had to be 0. i have multiple v-selects inside a data table and so the reset works only for the first change event. – setcookie Dec 10 '19 at 07:35

score 5 · Answer 2 · answered Apr 13 '21 at 12:48

Setting the value to 0 only worked for the first change for me. Every subsequent change did not reset the displayed value. The only thing that worked consistently for me was using $nextTick. e.g.

onInput() {
    this.$nextTick(() => {
        this.select = 0;
    });
}

It seems to be something to do with vuetify's internal implementation, and the lazyValue getting out of sync with the value prop.

score 1 · Answer 3 · answered Nov 10 '20 at 13:38

As I far understand your question. The solution could be using the ref key in the v-select element and call the reset() function. For example

In HTML

<v-select @change="handleOnSelectChange"
           ref="selectedEl"/>

In vue methods

methods:{ handleOnSelectChange:function(){this.$refs["selectedEl"].reset();}}

Vuetify 2.1 V-Select reset or clear selection after change

3 Answers3