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

雾桩元组
• 阅读 6061

今天在实现一个表单赋值并修改的功能时,由于其中数值直观显示不美观,所以使用了 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 配合使用,双向绑定失效

部分代码如下:

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

点赞
收藏
评论区
推荐文章
02-Vue入门之数据绑定
02Vue入门之数据绑定02Vue入门之数据绑定2.1.什么是双向绑定?Vue框架很核心的功能就是双向的数据绑定。双向是指:HTML标签数据绑定到Vue对象,另外反方向数
九旬 九旬
4年前
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。区别Vue和jQuery的区别:不直接操作DOM,而是操作数据。案例:HelloWorld你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue实现javascriptthis.msg'你好,世界'
凯特林 凯特林
4年前
Vue 项目性能优化—实践指南
Vue项目性能优化—实践指南前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效
Souleigh ✨ Souleigh ✨
4年前
Vue 性能优化
前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际
Easter79 Easter79
3年前
Vue 组件实现数据双向绑定(el
一、组件vmodel值通过props传入,必须定义为value!(https://oscimg.oschina.net/oscnet/66e6fa03cb5d23a24fd7d45e5e782b125ec.png)二、将传入的value在data中重新定义赋值,以便子组件改变值(子组件中不能直接修改props
昔不亏 昔不亏
4年前
「组件」侧边hover锚点导航双向绑定
样式如图:1:在components文件夹下新建SideAnchorNav.vuejs<template<divclass"sideAnchorNav"<divclass"leftnav":class"navText?'navHover':''"@mouseenter"navTexttrue"@mou
Chase620 Chase620
4年前
面试官问 Vue 性能优化,我该怎么回答
前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过
Anthony555 Anthony555
4年前
前端面试系列——Vue面试题
Vue双向绑定原理mvvm双向绑定,采用数据劫持结合发布者订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。双
Stella981 Stella981
3年前
Spring Boot 2 + Thymeleaf:表单字段绑定、表单提交处理
SpringBoot中Thymeleaf对表单处理的一些用法:(1)使用th:field属性:进行表单字段绑定(2)使用ids对象:一般用于lable配合radio或checkbox使用(3)表单提交处理开发环境:IntelliJIDEA2019.2.2SpringBoot版本:2.1.8新建一个名称为demo的Spr
手牵手带你实现mini-vue | 京东云技术团队
Vue的双向数据绑定实现原理是什么样的,如果让我们自己去实现一个这样的双向数据绑定要怎么做呢,本文就与大家分享一下Vue的绑定原理及其简单实现
融云IM即时通讯 融云IM即时通讯
8个月前
融云IM干货丨uni-app 在性能上如何优化?
uniapp性能优化可以从以下几个方面进行:使用生产环境构建:确保在部署到生产环境之前,使用Uniapp的生产构建版本,它会进行代码压缩和性能优化。避免不必要的数据绑定:减少使用不必要的双向绑定和计算属性,尽量直接使用props传递数据。虚拟列表渲染:对于