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

Question

我必须修复一个从 Vue 类扩展并包含 V-Select 组件的 vuetify 自定义组件。下拉菜单工作正常，但由于它只是弹出打开模式的触发板，因此要求是在 onchange 事件后重置/清除下拉选择。基本上我认为我需要触发clearableCallback，但我不知道如何做到这一点。首先，我遇到的问题是，当我从父组件绑定方法时，作用域始终是父组件，因此 this 指的是扩展父组件类。所以我想知道如何进入 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

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

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

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