Как обнаружить изменения, сделанные в редактируемом поле в Vue?

Question

У меня есть такой объект:

users: {
    email: '',
    password: ''
}

Когда пользователь что-то редактирует, я хочу обнаружить изменения, сделанные в ключе объекта users, и сохранить этот ключ в другом объекте (скажем, editedFields)!Как я могу это сделать?

Я пытался использовать глубоких наблюдателей, как это:

watch: {
    users: {
        handler: function(val, oldVal) {
            //
        },
        deep: true
    }
}

Но я не уверен, как получить этот отредактированный ключ!Пожалуйста, помогите

Answer 1

Я думаю, что-то вроде этого может работать?

data: function() {
  return {
    user: { 
      email: '',
      password: ''
    },
    editedFields: []
  }
},
watch: {
  users: {
    handler: function(val, oldVal) {
      for (var key in val) {
        if(val[key] != oldVal[key]) {
          this.data.editedFields.push(key);
        }
      }
    },
    deep: true
  }
}

Но на самом деле, есть лучший способ справиться с этим - создать новый компонент Vue для каждого поля.Затем вы можете проверить, обновлялся ли он в каждом компоненте.

Answer 2

Я думаю, что это работает:

watch: {
    'users.email': function(newEmail, oldEmail) {
        //
    }
}