Question

我编辑时两个对象都相同。显示分离对象的解决方案。我有一个对象，并使用v模型将其绑定到输入以更新它，但是当我编辑它但不保存更改时，该对象已更改。为避免这种情况发生，我在编辑时使用了第二个对象（临时），但我再次使用了该对象。

data(){
   return{
      user:{
        id:'',
        firstname:'',
        lastname: ''
      },
    tuser:{}
     }
  },
 mounted(){
     axios.get('/user')
         .then((response) => {
              this.user = response.data  
             })
         .catch(error)
    },
 methods:{
      edit(){
      this.tuser = this.user
      },
 update(){
      axios.patch(`/user/${this.tuser.id}`,this.tuser)
         .then((response)=>{
                 this.user = this.tuser
          })
       .error()
      }
 }

Answer 1

最可能是因为您将一个对象引用到另一个对象。由于对象是引用，不是原始值。它的意思是：如果使obj1 = obj2，则实际上它们都指向同一对象，如果更改一个，则也更改另一个。您需要使用类似Object.assign（）的东西 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Answer 2

methods:{
  edit(){
  this.tuser = this.user
  },

我认为您只需要传递this.user的克隆副本，就可以使用lodash / underscore.js方法（如clone或cloneDeep）来实现。如果您不复制对象，那么它们将引用同一对象

Answer 3

您正在突变一个参考值，无论您更改哪个参考值-它们都将更新，因为它们在内存堆中共享相同的地址。

因此，在尝试获取任何参考值的副本时，请使用ES6 spread进行克隆。

this.user = { ...this.tuser }

或

this.tuser = { ...this.user }

参考文献：spread_es6

两个对象具有相同的值

3 个答案: