[英]How to get around vuetify's v-select internal state
I'm trying to prevent a value from being 'selected' when using vuetify's v-select component. 我正在尝试使用vuetify的v-select组件阻止值被“选中”。
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']
}),
computed: {
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 Codepen: https ://codepen.io/anon/pen/mYNVKN ? edit = 1011
When another value is selected, the components selected value is not being updated. 选择其他值时,不会更新组件选定值。 However v-select still shows the new selected value. 但是,v-select仍显示新选择的值。
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. 我相信v-select正在保持自己的内部选择值。
I made it using slot-scope
look: 我使用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 does nothing: 这没有任何作用:
this.selected = this.selected this.selected = this.selected
You have to set the value, wait for vue to update the props, then set it back again: 你必须设置值,等待vue更新道具,然后再将其设置回来:
const oldVal = this.selected
this.selected = val
this.$nextTick(() => {
this.selected = oldVal
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.