javascript - 如何绕过 vuetify 的 v-select 内部状态

Question

我试图阻止在使用 vuetify 的 v-select 组件时“选择”一个值。

给定:

<v-checkbox
    v-model="allowChanges"
></v-checkbox>
<v-select
    v-model="twoWayComputed"
    :items="items"
></v-select>

new Vue({
  el: '#app',
  data: () => ({
    selected: "Foo",
    allowChanges: false,
    items: ['Foo', 'Bar', 'Fizz', 'Buzz']
  }),
  computed: {
    twoWayComputed: {
      get(){
        return this.selected
      },
      set(val){
        if (this.allowChanges){
          console.log("updating")
          this.selected = val
        }
      }
    }
  }
})

代码笔:https://codepen.io/anon/pen/mYNVKN?editors=1011

选择另一个值时，所选值未更新。但是 v-select 仍然显示新选择的值。

我什至尝试了各种“技巧”，比如

  set(val){
    if (this.allowChanges){
      console.log("updating")
      this.selected = val
    } else {
      this.selected = this.selected
    }

但没有运气。

我相信 v-select 正在维护自己的内部选择值。

Answer 1

这什么都不做:

this.selected = this.selected

你必须设置值，等待vue更新props，然后再设置回来:

const oldVal = this.selected
this.selected = val
this.$nextTick(() => {
  this.selected = oldVal
})

Codepen