如何将值从一个变量绑定到其他变量

Question

我有 2 个变量 masterdata 和 datatoedit。 masterdata 有数组值，datatoedit 有对象值。

我想把数据1从masterdata复制到变量datatoedit，所以我这样写：

this.datatoedit = this.masterdata[0]

但是当我编辑来自 datatoedit 的数据时，masterdata[0] 上的表单数据也发生了变化。

如何在编辑 datatoedit 时防止 masterdata[0] 被更改？

Answer 1

您可以使用 ES6 Spread syntax 制作对象副本：

this.datatoedit = {...this.masterdata[0]}

Answer 2

您也可以使用 lodash 函数 clonedeep 来完成此操作。它不会复制引用。

data_to_edit = _.cloneDeep(masterdata[0])

您现在可以根据需要修改data_to_edit。

Answer 3

如果 masterdata 元素具有像

这样的嵌套对象，则接受的答案可能会出错

{
   name: 'John',
   age: 30,
   address: {
       street: 'ChurchStreet',
       city: 'Bangalore',
       state: 'KA'
   }
}

    var masterdata = [
        {
            name: 'John',
            age: 30,
            address: {
                street: 'ChurchStreet',
                city: 'Bangalore',
                state: 'KA'
            }
        },
        {
            name: 'Jane',
            age: 26,
            address: {
                street: 'West of Chord',
                city: 'Mumbai',
                state: 'MH'
            }
        }
    ];

    // With spread operator
    var datatoedit = {...masterdata[0]};
    datatoedit.age = 32;
    datatoedit.address.street = 'Infantry Road';

    console.log('With spread operator');
    console.log('masterdata[0]: ' + JSON.stringify(masterdata[0]));
    console.log('datatoedit: ' + JSON.stringify(datatoedit));


    // With Object.assign()
    datatoedit = Object.assign({}, masterdata[0]);
    datatoedit.age = 35;
    datatoedit.address.street = 'Brigade Road';
    console.log('With Object.assign()');
    console.log('masterdata[0]: ' + JSON.stringify(masterdata[0]));
    console.log('datatoedit: ' + JSON.stringify(datatoedit));


    // Now with JSON.parse() and JSON.stringify()
    datatoedit = JSON.parse(JSON.stringify(masterdata[0]));
    datatoedit.age = 35;
    datatoedit.address.street = 'West of Chord Road';

    console.log('With JSON.parse() and JSON.stringify()');
    console.log('masterdata[0]: ' + JSON.stringify(masterdata[0]));
    console.log('datatoedit: ' + JSON.stringify(datatoedit));

如您所见，在嵌套对象的情况下，扩展运算符和 Object.assign() 都可能在浅拷贝时出错。

结合使用 JSON.parse() 和 JSON stringify() 会产生深度复制的效果，因此它在所有情况下都能正常工作。（尽管这些功能并不适用于深度复制）。

如何将值从一个变量绑定到其他变量

How to binding value from one variable to others

javascript

bind

vue.js

vue-component

vuejs2