VUE如何解除数据之间的双向绑定
问题在开发过程中,我想要的结果是,一个表格和数据data数组绑定,将data中的数据依次遍历渲染到表格。而data的数据是通过另一个this.formValidate 来push,代码如下this.formValidate.BookISBN = res.data.Data.ISBNthis.formValidate.BookName = res.data.Data.BookTitlethis.fo
·
问题
在开发过程中,我想要的结果是,一个表格和数据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与字符串之间数据结构转变的函数,不了解的可以自行查阅。
更多推荐
已为社区贡献4条内容
所有评论(0)