我试图阻止在使用 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
}
}
}
}
})
代码笔:https://codepen.io/anon/pen/mYNVKN?editors=1011
选择另一个值时,所选值未更新。但是 v-select 仍然显示新选择的值。
我什至尝试了各种“技巧”,比如
set(val){
if (this.allowChanges){
console.log("updating")
this.selected = val
} else {
this.selected = this.selected
}
但没有运气。
我相信 v-select 正在维护自己的内部选择值。
最佳答案
这什么都不做:
this.selected = this.selected
你必须设置值,等待vue更新props,然后再设置回来:
const oldVal = this.selected
this.selected = val
this.$nextTick(() => {
this.selected = oldVal
})
关于javascript - 如何绕过 vuetify 的 v-select 内部状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56501460/