当前位置: 首页 > Web前端 > vue.js

VUE:computed和v-model一起使用,双向绑定无效

时间:2023-04-01 00:38:26 vue.js

今天在实现赋值修改表单的功能时,因为里面的值在视觉上不美观,所以使用了computed属性,同时,v-model使用双向绑定,来处理显示。但是我发现v-model的双向绑定是无效的。控制台警告信息如下:vue.runtime.esm.js?2b0e:619[Vuewarn]:Computedproperty"versionRule"wasassignedtobutithasnosetter.部分代码如下:equalto不等于计算:{versionRule(){const{version}=this.data;返回版本&&/!=;/.test(version)?0:1;}}查资料发现计算属性的写法只有get方法,双向绑定控制数据变化,需要数据赋值的功能。如果要赋值,需要添加set方法。将计算部分更改为以下内容:computed:{versionRule:{get(){const{version}=this.data;返回版本&&/!=;/.test(version)?0:1;},set(val){const{version}=this.data;如果(版本){consttemp=version.replace(/=;/g,'').replace(/!/g,'');这个.数据。版本=(val?'=;':'!=;')+temp;}else{this.data.version=val?'=;':'!=;';}}}}reverseofget逻辑上写set方法即可。