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

Answer 1

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;
}

Answer 2

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.

Answer 3

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();}}