Vue2变量意外行为答案

【问题标题】：Vue2 Variable unexpected behaviourVue2变量意外行为
【发布时间】：2021-03-14 00:55:24
【问题描述】：

我在使用 Vue2 变量时遇到了一些问题。

我的目标是创建从 Axios 调用中提取的变量的备份，然后将其用于将主变量重置为原始值。主变量称为loaded_data，副本称为original_data。

我的问题是，当我复制变量时，它通过引用而不是值传递它。所以当我更新我的loaded_data 变量时，original_data

变量是如何定义的：

data() {
    return {
      loaded_data: false,
      original_data: false,
    };
},

如何设置变量：

this.loaded_data = axios_response.response.data;
this.original_data = axios_response.response.data;

重置数据功能。

reset_data() {
    console.log('ORIGINAL', this.original_data);
    console.log('LOADED', this.loaded_data);

    this.loaded_data = this.original_data;
},

所以当我更新我的loaded_data 变量时。例如：

loaded_data.value = 'this is an update to the data';

它也在更新 original_data 变量。如果我运行reset_data() 函数，控制台日志如下所示。

ORIGINAL {__ob__: Observer}
value: "this is an update to the data"

LOADED {__ob__: Observer}
value: "this is an update to the data"

它应该是什么样子：

ORIGINAL {__ob__: Observer}
value: ""

LOADED {__ob__: Observer}
value: "this is an update to the data"

这实际上没有任何意义，因为 loaded_data 和 original_data 没有在 reset_data 函数旁边链接并使用 axios_response 进行设置。

任何帮助或想法都会非常有帮助。

【问题讨论】：

标签： vuejs2

【解决方案1】：

JavaScript 将同一个对象复制到两个变量中。您需要将对象的第二个副本作为original_data。一种方法是使用

this.original_data = JSON.parse(JSON.stringify(axios_response.response.data));

在你得到数据之后。

【讨论】：