vue.js - 无法阻止更改 v-select 组件的值

Question

我正在使用 Vuetify 来呈现组合框，当用户更改该组合框的值时，我想显示一条消息，要求确认操作，但如果用户不同意更改，我将无法阻止值的更改值(value)。我都试过 input和 change事件。
在 HTML 下方:

  <v-app>
    <v-container class="indigo lighten-5">
      <v-row no-gutters>
        <v-col cols="12">
          <v-select v-model="o.selected" :items="values" @input="inputSelect"></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-app>

而监听变化的方法是:

    inputSelect(val) {
      console.log(val);
      if (confirm(`Do you really want to change the value to ${val}?`)) {
        console.log("ok");
        return true;
      } else {
        console.log("ko");
        return false;
      }
    }

我创建了一个 pen重现该行为。

Answer 1

这可能不是最好的解决方案，但在尝试使其工作后，我发现 v-select尽管 o.selected 里面的值总是改变值没有改变。
所以解决方法是你可以重置 o.selected首先然后将旧值设置回 o.selected .我加了 setTimeout()在代码设置回旧值之前给它一个等待。

  inputSelect(val) {
      // store the old value to this variable first
      let oldVal = this.o.selected

      if (confirm(`Do you really want to change to ${val}?`)) {
        this.o.selected = val;
      } else {
        // reset value to whatever value you want
        this.o.selected = '';
        // set timeout here, if no set timeout so the code on the line above will be useless
        setTimeout(() => {
          this.o.selected = oldVal;
        }, 100)
      }
      this.$forceUpdate();  
  }