How can I prevent a value from being 'selected' when using the vuetify's v-select component?
Here is an example:
<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 link: https://codepen.io/anon/pen/mYNVKN?editors=1011
When I select another value, the component's selected value does not update, but v-select still displays the new selected value.
I have tried various strategies like:
set(val){
if (this.allowChanges){
console.log("updating")
this.selected = val
} else {
this.selected = this.selected
}
Unfortunately, none of these tricks seem to work.
It seems like v-select may be maintaining its own internal selected value.