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

Question

我必须修复从 Vue Class 扩展并包含 V-Select 组件的 vuetify 自定义组件。下拉菜单工作正常，但由于它只是一个用于弹出打开模式的触发板，因此要求 reset/clear 下拉菜单 selection 在 onchange 事件之后。基本上我想我需要触发 clearableCallback 但我不知道该怎么做。首先，我遇到的问题是，当我从父组件绑定方法时，范围始终是父组件，因此 this 指的是扩展父组件 class。所以我想知道如何进入 v-select 组件的范围。除了 clearable prop 之外，我看不到我正在尝试做的事情没有原生功能。有什么提示吗？谢谢

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 prop 不同步。

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

Vuetify 2.1 V-Select reset or clear selection after change

vuetify.js

v-select