为啥使用 Vue 编辑数据不能按预期工作

Posted 2023-02-23

【中文标题】为啥使用 Vue 编辑数据不能按预期工作

【英文标题】：Why Edit data with Vue not work as desired为什么使用 Vue 编辑数据不能按预期工作

【发布时间】：2019-02-27 22:38:19

【问题描述】：

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

【参考方案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，它不会创建新对象。

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

【参考方案2】：

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

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

而不是

this.users[8] = user;

在 saveData 方法中。

当然有

this.user = ...用户

@dziraf