博客

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]));  
        这样三个值的类型不一致以后，不会因为一个值的改变而改变