[英]How to get around vuetify's v-select internal state
我正在尝试使用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正在保持自己的内部选择值。
我使用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
}
}
}
}
这没有任何作用:
this.selected = this.selected
你必须设置值,等待vue更新道具,然后再将其设置回来:
const oldVal = this.selected
this.selected = val
this.$nextTick(() => {
this.selected = oldVal
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.