javascript - 如何检测 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) {
        //
    }
}