Vuetify 2.1 V-Select重置或更改后清除选择

Question

我必须修复从Vue Class扩展并包括V-Select组件的vuetify自定义组件。下拉菜单工作正常，但由于它只是触发板来弹出打开的模式，因此要求在onchange事件之后重置/清除下拉菜单选择。基本上我认为我需要触发clearableCallback，但是我不确定该怎么做。首先，我有一个问题，当我从父组件绑定方法时，作用域始终是父组件，因此这是指扩展父组件类。所以我想知道如何进入v-select组件的范围。除了可清除的道具外，我看不到我尝试执行的本机功能。有什么提示吗？谢谢

Answer 1

我不确定我是否完全理解您的问题，但是如果我理解，您可以尝试在v-select上使用@change事件，并使用一种方法来打开模态并将v-select模型的值重置为任何想要的。

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

...

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

Answer 2

据我所知您的问题。解决方案可能是使用v-select元素中的ref键并调用reset（）函数。 例如

在HTML

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

vue方法中

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

Answer 3

将值设置为 0 仅适用于我的第一次更改。每次后续更改都不会重置显示值。唯一对我有用的方法是使用 $nextTick。例如

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

这似乎与 vuetify 的内部实现有关，以及 lazyValue 与 value 道具不同步。