VueJs 方法正在直接更改响应

Question

我有一个 parent 组件，我正在那里查询后端，然后在导航栏和 parent 组件中的 activeView 数据的帮助下，点击我呈现一个新的 child 页面并在 vue 中的 v-if 的帮助下从我的回复中传递一个道具。但是该方法的功能之一是更改 parent 组件中的道具，它也更改了我的响应这怎么可能。这是我的 child 组件之前的挂载：

beforeMount() {
    console.log(this.plansPropOrg);
    this.plansProp = this.plansPropOrg;
    this.tempPlan = this.plansProp.currentPlan;

    console.log(this.plansProp);
    this.propsToData();
}

有问题的函数是 propsToData 当我在这里注释时它是正常的但我必须调用它。

这是我查询时的 parent：

await axios.post("xxxxx/yyyyyyy").then(res => {
                console.log("heyyo");
                console.log(res);
                this.plansData = res.data.data;
                console.log(this.plansData);
            });

这是数据的道具，它只是将布尔值翻译成英文。但在响应中，（当此 if 为真时）我将这些值视为翻译。

propsToData() {
        //TODO: Burdaki if' ifsubscriber olarak değişecel
        console.log("AAA");
        console.log(this.plansProp);
        if (this.plansProp.isSubscriber) {
            console.log("BBBBB");
            this.plansProp.currentPlan.analytics
                ? (this.plansProp.currentPlan.analytics = this.$t(
                      "settings.plans.active"
                  ))
                : (this.plansProp.currentPlan.analytics = this.$t(
                      "settings.plans.inactive"
                  ));
         }
   }

这怎么可能怎么改变响应？

Answer 1

您正在通过引用复制响应和 plansProp 对象，这意味着这两个对象都指向内存中的同一位置。当您更改其中一个时，另一个仍指向内存中的同一个位置，这意味着当您检索它时，它将是同一个对象。

您想进行浅 (Object.assign()) 或深 (JSON.parse(JSON.stringify())) 复制，具体取决于对象的结构。

更多信息请点击这里 https://www.javascripttutorial.net/object/3-ways-to-copy-objects-in-javascript/。

VueJs 方法正在直接更改响应

VueJs Method is changing directly a response

javascript

methods

mount

response

vue.js