今天在实现一个表单赋值并修改的功能时,由于其中数值直观显示不美观,所以使用了 computed
计算属性,同时使用 v-model
的双向绑定,来处理显示。但却发现 v-model 的双向绑定失效了,控制台警告信息如下:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Computed property "versionRule" was assigned to but it has no setter.
部分代码如下:
<a-radio-group v-model="versionRule">
<a-radio-button :value="1">等于</a-radio-button>
<a-radio-button :value="0">不等于</a-radio-button>
</a-radio-group>
computed: {
versionRule() {
const { version } = this.data;
return version && /!=;/.test(version) ? 0 : 1;
}
}
查了资料发现是计算属性的这种写法只有 get
方法,而双向绑定控制数据变化,需要数据赋值的功能,如果想赋值,还需要增加 set
方法。
将computed部分改成如下写法就可以了
computed: {
versionRule: {
get() {
const { version } = this.data;
return version && /!=;/.test(version) ? 0 : 1;
},
set(val) {
const { version } = this.data;
if (version) {
const temp = version.replace(/=;/g, '').replace(/!/g, '');
this.data.version = (val ? '=;' : '!=;') + temp;
} else {
this.data.version = val ? '=;' : '!=;';
}
}
}
}
按 get
的反向逻辑写出 set
方法就可以了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。