类属性内对象内部的vue v2值已更改,但未更改

时间:2019-01-29 15:27:14

标签: javascript vue.js vuejs2

我正在使用vue v2创建SPA。 我在vue组件的脚本部分中声明了一个Offer类,如下所示:

<iostream>

Tariff和TariffCopy是从称为Tariff的自定义类初始化的对象,该类也在同一组件的脚本部分中声明。基本上它们包含相同的值,但“关税”可以接受值的更改,而“基础关税”的值应保持不变。

class Offer {
       constructor(Tariff, TariffCopy, billing, at, fa, backs) {
       this.Tariff = Tariff;
       this.BaseTariff = TariffCopy;
    }

    changeSAC(p1, p2) {
       ...
       this.Tariff.provAufwand.SO = this.BaseTariff.provAufwand.SO + Number(p1);
    }
}

其中

class Tariff{
    constructor(provAufwand) {
        this.provAufwand = provAufwand;
    }
}

在调用provAufwand= { SO: 1, HO5: 2, HO10: 3, HO20: 4 } 时(p1和p2绑定到通过Offer.changeSAC(p1,p2)v-model="p1"的数字输入上),v-model="p2"的值也被更改了,尽管我从未更改过在代码中。 这是为什么?它们在我的代码中的哪里连接?

1 个答案:

答案 0 :(得分:1)

假设您创建了Tariff个实例,如下所示:

const provAufwand= {
    SO: 1,
    HO5: 2,
    HO10: 3,
    HO20: 4
};
const tariff = new Tariff(provAufwand);
const tariffCopy = new Tariff(provAufwand);

然后,当您更改BaseTarifftariffCopytariff也会更改的原因是它们引用了相同的provAufwand对象。

provAufwand传递给Tariff构造函数时,传递的参数不是对象的实际value,而是对象的reference

  

当您向函数传递objectarray时,参数   已通过引用

这意味着更改函数内部对象/数组的值会影响函数外部相同对象/数组的值。

要解决此问题,可以在创建新的provAufwand对象时传递Tariff时使用spread syntax

const provAufwand= {
    SO: 1,
    HO5: 2,
    HO10: 3,
    HO20: 4
};
const tarrif = new Tariff({...provAufwand});
const tarrifCopy = new Tariff({...provAufwand});

这可确保您在创建类实例时传递完全不同的对象。