代码之家 › 专栏 › 技术社区 › acincognito

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

vuejs2 vue.js javascript

acincognito · 技术社区 · 7 年前

我在vue组件的脚本部分声明了一个类似这样的提供类:

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);
    }
}

Tariff和TariffCopy是从名为Tariff的自定义类初始化的对象,该自定义类也在同一组件的脚本部分声明。基本上,它们包含相同的价值,但关税可能会发生价值变化,而基本关税的价值应保持不变。

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

哪里

provAufwand= {
    SO: 1,
    HO5: 2,
    HO10: 3,
    HO20: 4
}

打电话的时候 Offer.changeSAC(p1,p2) v-model="p1" 和 v-model="p2" )价值 this.BaseTariff.provAufwand.SO 也发生了变化,尽管我从未在代码中对其进行过修改。为什么呢?在我的代码中,它们在哪里连接?

1 回复 | 直到 7 年前

Ana Liza Pandac 7 年前

假设您创建了 Tariff 例如:

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

BaseTariff tariffCopy 当你改变的时候也在改变 tariff provAufwand 对象

当你经过的时候 关税 value 除了 reference 对该对象。

object 或 array 函数,然后是参数是 参照传递 .

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

要解决这个问题,您可以使用 spread syntax 路过时 关税 对象

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

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

4 年前

Park · Vuejs道具,路径较长

4 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

4 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

8 年前

Ready Dev · Axios一次发出多个请求(vue.js)

8 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

8 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

8 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

8 年前

Tim · VueJS-迭代从AJAX调用返回的数据

8 年前