为什么使用Vue编辑数据无法正常工作

Question

我在这里发布代码 https://codesandbox.io/s/mm364r6ov8 我的问题是，当我单击“编辑”时，模态显示。但是，每当我更改字段名称（或其他字段）的数据时，该行的数据也会更改。 有什么建议吗？

Answer 1

由于在您的EditModal中通过将其引用到用户列表中的用户对象来为其分配user属性，因此该数据已更改：

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

首先，请不要在此处使用self，因为如果使用箭头功能，这是多余的。

现在，要使它在编辑输入时不编辑用户列表中的用户，您只需复制用户即可，例如，使用Object.assign：

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

或destructuring assignment：

this.user = { ...user }

请注意，Object.assign和销毁结构都不会创建深层副本，因此，如果您有许多嵌套属性，则可能需要自己实现深层副本功能。

我已经看到您可能在将用户传递给您的模式之前试图复制该用户：

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

但是，var temp = user;仅为user分配了一个temp引用，它不会创建新对象。

这应该可以解决您的问题，但是模态的save方法不起作用，但这是另一个问题。

Answer 2

谢谢您的回答。最后，我找到了一种将数据从模式保存到结果行的方法。我必须使用

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

代替

this.users[8] = user;

在saveData方法中。

当然可以

  

this.user = {... user}

@dziraf