[Vuejs]-Why Edit data with Vue not work as desired

by

0👍

That data is changed due to the fact that in your EditModal you assign it’s user property by referencing it to a user object from your users list:

self = this;
EventBus.$on("edit-user", use => {
  self.user = use;
});

First of all, don’t use self here because it’s redundant if you are using arrow functions.

Now, to make it not edit the user in your users list whenever you edit the input you simply have to make a copy of the user, for example by using Object.assign:

EventBus.$on("edit-user", user => {
  this.user = Object.assign(this.user, user);
});

or a destructuring assignment:

this.user = { ...user }

Just note that neither Object.assign nor destructuring assignment make a deep copy so if you have many nested properties you may want to implement a deep copy function yourself.

I’ve seen that you probably attempted to make a copy of user before passing it to your modal:

editUser(user) {
  var temp = user;
  EventBus.$emit("edit-user", temp);
},

However, var temp = user; only assigns a user reference to temp, it doesn’t create a new object.

This should fix your problem but your modal’s save method doesn’t work, but that’s another issue.

0👍

thank for your answer . Finally , i found a way to save data from modal to result row . I must use 

this.users.splice(8, 1, user)

instead of 

this.users[8] = user;

in saveData method .

Of course with

this.user = { …user }

of @dziraf

Leave a comment