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.

部分代码如下：

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7664