VUE如何解除数据之间的双向绑定

问题
在开发过程中,我想要的结果是,一个表格和数据data数组绑定,将data中的数据依次遍历渲染到表格。
而data的数据是通过另一个this.formValidate 来push,代码如下

            this.formValidate.BookISBN = res.data.Data.ISBN
            this.formValidate.BookName = res.data.Data.BookTitle
            this.formValidate.Author = res.data.Data.Author
            this.data2.push(this.formValidate)

这样写造成的结果是:每次添加新的数据时,data2中的所有数据都会变成刚刚添加的新数据,看下图
第一个记录录入
在这里插入图片描述
第二个记录录入
在这里插入图片描述
这就很尴尬,于是想解除数据的双向绑定。


结论
用JSON,对对象进行深拷贝。先上代码

            this.formValidate.BookISBN = res.data.Data.ISBN
            this.formValidate.BookName = res.data.Data.BookTitle
            this.formValidate.Author = res.data.Data.Author
            let formdata= JSON.parse(JSON.stringify(this.formValidate))
            this.data2.push(formdata)

使用这句话let formdata= JSON.parse(JSON.stringify(this.formValidate)) 其实是通过json之间的解析 创建的临时变量,不会随this.formValidate改变而改变。 其中parsestringfy 两个函数是json与字符串之间数据结构转变的函数,不了解的可以自行查阅。

  • 11
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue 中,实现数据双向是通过使用 Vue 的响应式系统来实现的。Vue 的响应式系统基于 ES5 的 Object.defineProperty() 方法或 ES6 的 Proxy 对象来追踪数据的变化。 当 Vue 实例创建时,它会遍历 data 对象中的所有属性,并使用 Object.defineProperty() 或 Proxy 来将这些属性转换为 getter 和 setter。这样,当访问或修改这些属性时,Vue 就能够捕捉到这些操作,并触发相应的更新。 在模板(View)中,可以使用 v-model 指令来实现双向数据。v-model 指令会根据表单元素的类型自动选择合适的方式来数据。当用户在表单元素中输入数据时,v-model 会将用户输入的值更新到对应的数据属性上;同时,当数据属性发生变化时,v-model 也会将最新的值同步到表单元素上,实现数据双向。 当数据属性发生变化时,Vue 会自动触发重新渲染视图。这是因为 Vue 的响应式系统会追踪数据的依赖关系,当数据被使用到的地方发生变化时,Vue 就会通知相关的组件或模板进行更新。 需要注意的是,Vue双向并不是真正的双向,而是通过将数据属性和表单元素的值进行来实现的。Vue 会将数据变化反映到视图上,但是视图的变化不会直接更新到数据中,需要通过用户的交互或其他途径来更新数据。 总结起来,Vue双向原理是通过响应式系统追踪数据变化,并使用 v-model 指令将数据属性和表单元素的值进行双向,实现数据的自动更新和同步。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值