I'm trying to prevent a value from being 'selected' when using vuetify's v-select ponent.

Given:

<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']
  }),
  puted: {
    twoWayComputed: {
      get(){
        return this.selected
      },
      set(val){
        if (this.allowChanges){
          console.log("updating")
          this.selected = val
        }
      }
    }
  }
})

Codepen:

When another value is selected, the ponents selected value is not being updated. However v-select still shows the new selected value.

I even tried all kinds of "tricks" like

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

but no luck.

I believe v-select is maintaining its own internal selected value.

I'm trying to prevent a value from being 'selected' when using vuetify's v-select ponent.

Given:

<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']
  }),
  puted: {
    twoWayComputed: {
      get(){
        return this.selected
      },
      set(val){
        if (this.allowChanges){
          console.log("updating")
          this.selected = val
        }
      }
    }
  }
})

Codepen: https://codepen.io/anon/pen/mYNVKN?editors=1011

When another value is selected, the ponents selected value is not being updated. However v-select still shows the new selected value.

I even tried all kinds of "tricks" like

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

but no luck.

I believe v-select is maintaining its own internal selected value.

• javascript
• vue.js
• vuetify.js

• Could you just add :disabled="!allowChanges" to the v-select? Like this: <v-select v-model="twoWayComputed" :items="items" label="Standard" :disabled="!allowChanges" ></v-select> – Cato Minor Commented Jun 7, 2019 at 21:58
• You could but that's not the UX that was dictated. For reference the desire is to pop a modal if a change is made and there are unsaved changes – RoboKozo Commented Jun 7, 2019 at 22:03

2 Answers 2

I made it using slot-scope look:

<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']
  }),
  puted: {
    twoWayComputed: {
      get(){
        return this.selected
      },
      set(val) {
        if (this.allowChanges) {
          console.log("updating")
          this.selected = val
        } 
      }
    }
  }

check-out-my-codepen

This does nothing:

this.selected = this.selected

You have to set the value, wait for vue to update the props, then set it back again:

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

Codepen