时间戳

首页 > 解决方案 > VueJs 方法是直接改变一个响应

javascript - VueJs 方法是直接改变一个响应

问题描述

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

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

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

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

这是我进行查询时的父母：

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

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

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

这怎么可能呢？它怎么能改变反应呢？

标签： javascriptvue.jsmethodsresponsemount

解决方案

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

根据对象的结构，您想要进行浅拷贝（Object.assign()）或深拷贝（ ）。JSON.parse(JSON.stringify())

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

推荐阅读