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

最新推荐文章于 2025-03-17 07:30:00 发布

wakakaHBW

最新推荐文章于 2025-03-17 07:30:00 发布

阅读量6.1k

点赞数 11

分类专栏： vue 文章标签： vue json

本文链接：https://blog.youkuaiyun.com/wakaka112233/article/details/107100604

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

问题
在开发过程中，我想要的结果是，一个表格和数据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改变而改变。其中parse和stringfy 两个函数是json与字符串之间数据结构转变的函数，不了解的可以自行查阅。