Почему редактирование данных с помощью Vue не работает должным образом

Question

Я выкладываю свой код здесь https://codesandbox.io/s/mm364r6ov8 Моя проблема в том, что когда я нажимаю "Изменить", модальное шоу.Но всякий раз, когда я изменяю данные в имени поля (или другого поля), данные в этой строке тоже меняются.Любое предложение?

Answer 1

благодарю за ответ.Наконец, я нашел способ сохранить данные из модальной строки результатов.Я должен использовать

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

вместо

this.users[8] = user;

в методе saveData.

Конечно, с

this.user = {... user}

из @ dziraf

Answer 2

Эти данные изменяются в связи с тем, что в вашем EditModal вы присваиваете его свойство user, ссылаясь на него для объекта пользователя из списка пользователей:

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

Прежде всего, donне используйте self здесь, потому что это избыточно, если вы используете функции стрелок.

Теперь, чтобы не редактировать пользователя в вашем списке пользователей всякий раз, когда вы редактируете ввод, вы просто должны сделать копиюпользователь, например, используя Object.assign :

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

или деструктурирующее назначение :

this.user = { ...user }

Просто обратите внимание, что ни Object.assign ни при деструктурирующем назначении не делайте глубокую копию, поэтому, если у вас много вложенных свойств, вы можете захотеть реализовать функцию глубокого копирования самостоятельно.

Я видел, что вы, вероятно, пытались сделать копию пользователя перед передачей еек вашему модальному:

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

Однако var temp = user; только присваивает ссылку user на temp, но не создает новый объект.

Это должно решить вашу проблемуно метод сохранения вашего мода не работает,но это другая проблема.