如何在vue js中保持数据不变

Question

我有一个这样的用户信息对象

data: function(){
  return {
    userinfo: {
       name:'',
       username:'',
       imagePath:''
   },
    previousUserInfo:{}
  }
 }

我在其他地方显示此用户信息：

<template>
  <div> user name: {{userinfo.name}}</div>
  <div> username: {{userinfo.username}}</div>
                  ....

在某些情况下，当前用户发生变化，我应该将以前的用户数据保存在 previousUserInfo 对象中：

 this.$set(this, 'previousUserInfo', this.userinfo);

但是当用户在userinfo中填写新数据时，之前的UserInfo数据也会发生变化。

我还尝试使用另一个变量来保存数据，但结果是一样的：

var previousUserInfo = this.userinfo;
this.$set(this, 'previousUserInfo', previousUserInfo);

有什么问题？

Answer 1

this.userinfo 和 this.previousUserInfo 指向同一个对象。

你可以尝试深拷贝this.userinfo

的值

 this.$set(this, 'previousUserInfo', JSON.parse(JSON.stringify(this.userinfo));

How to hold data without change in vue js