如何繞過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
        }
      }
    }
  }
})

Codepen： https ：//codepen.io/anon/pen/mYNVKN ？ edit = 1011

選擇其他值時，不會更新組件選定值。 但是，v-select仍顯示新選擇的值。

我甚至嘗試過各種各樣的“伎倆”

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

但沒有運氣。

我相信v-select正在保持自己的內部選擇值。

Answer 1

我使用slot-scope看起來：

<v-select
  v-model="twoWayComputed"
  :items="items"
  label="scoped"
>
  <template slot="selection" slot-scope="data">
    {{ selected }}
  </template>
  <template slot="item" slot-scope="data">
    {{ data.item }}
  </template>
</v-select>

  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
        } 
      }
    }
  }

退房-MY-codepen

Answer 2

這沒有任何作用：

this.selected = this.selected

你必須設置值，等待vue更新道具，然后再將其設置回來：

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

Codepen