javascript - 如何绕过 vuetify 的 v-select 内部状态
问题描述
我试图防止在使用 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?editors=1011
When another value is selected, the components selected value is not being updated. 但是 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
}
}
}
}
推荐阅读
- oauth - ADFS 3.0 和 JWT 令牌
- xml - XML 到字符串 PowerShell
- java - 如何使用 Hibernate 在 HQL 中使用子查询
- java - 使用 CSVParser 和 Formatter 返回记录列表
- ruby - 删除某些字符之间的子字符串
- github - Google Colab:使用来自 GitHub 的函数 .py
- angular5 - TypeError:在角度 5 中进行单元测试时无法读取未定义问题的属性“路径”
- ubuntu - 在容器中绑定挂载 /proc 或 /dev 导致操作不允许错误
- html - 在 shell 脚本中创建 html 文件
- mysql - MySQL 中先前计数的平均值