VUE双向数据绑定导致的BUG

毛毛雨7834

于 2020-03-31 10:03:58 发布

阅读量696

点赞数

CC 4.0 BY-SA版权

文章标签： vue bug

本文链接：https://blog.youkuaiyun.com/weixin_40690783/article/details/105215979

本文探讨了VUE中因双向数据绑定导致的表格选中数据与弹窗对象同步改变的问题，通过深拷贝解决这一BUG，避免了值的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE双向数据绑定导致的BUG

表格中的选中数据直接赋值给弹窗对象导致弹窗中值改变时表格中的值同步改变

eg. @selection-change=“handle” 当表格选择项发生变化时会触发该事件
将该行选中值保存下来
handle(select) {
this.selectList = select;
},
这样会导致将this.selectList 赋值给弹窗对象后，弹窗中值改变时表格中的值同步改变。
如：

         <el-form :model="formAdd">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="formAdd.name" autocomplete="off"></el-input>
                </el-form-item>
                 </el-form>
                 赋值：  this.formAdd= this.selectList[0];
           这就意味着这三个值 中有一个改变另外两个都改变；
       


       ==  解决方法：==
       
               handle(select) {
            this.selectList = JSON.parse(JSON.stringify(select));
        },
        赋值：  this.formAdd= JSON.parse(JSON.stringify( this.selectList[0]));  
        这样三个值的类型不一致以后，不会因为一个值的改变而改变