VUE:computed 和 v-model 配合使用,双向绑定失效

今天在实现一个表单赋值并修改的功能时,由于其中数值直观显示不美观,所以使用了 computed 计算属性,同时使用 v-model 的双向绑定,来处理显示。但却发现 v-model 的双向绑定失效了,控制台警告信息如下:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Computed property "versionRule" was assigned to but it has no setter.

VUE:computed 和 v-model 配合使用,双向绑定失效_第1张图片

部分代码如下:


  等于
  不等于
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 方法就可以了。

你可能感兴趣的:(vue.js)