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

Question

我必须修复一个从 Vue 类扩展并包含 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

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

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

这似乎与 vuetify 的内部实现有关，并且lazyValue与 prop 不同步value。

Answer 3

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

在 HTML 中

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

在 vue 方法中

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