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

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

image.png

部分代码如下:

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


Jamie_0912
51 声望3 粉丝