检测通过v-model附加到字段的数据对象成员的变化

Question

我有一个使用Vuetify的大型Vue应用程序，该应用程序主要由表单组成，我需要添加以下功能：检测何时对任何表单字段中的值进行了更改，以便当用户离开时表单中有未保存的更改，可以对其进行警告。我可以处理用于指示更改和发出警告的值的设置，但是我要做的第一件事是能够检测各个字段中的更改。

基本结构是：

1）创建一个包含表单字段不同值的对象：

class Tenant {
  constructor(tenant) {
    this.code = tenant.code || '';
    this.name = tenant.name || '';
    this.defaultPostBack = tenant.defaultPostBack || '';
    this.maxIdentities = tenant.maxIdentities || '';
  }
}

export default Tenant;

2）在组件data中定义它：

  data: () => ({
    tenantModel: new Tenant({}),
  })

但是也可以在代码中的其他位置进行更新，例如从后端检索记录时：

this.tenantModel = new Template({tenant})

3）通过v-model将对象成员绑定到各个字段：

<v-layout row>
  <v-flex xs6>
    <v-text-field v-bind="fields.defaultPostBack"
      v-model="tenantModel.defaultPostBack" />
  </v-flex>
  <v-flex xs6>
    <v-text-field v-bind="fields.maxIdentities"
      v-model="tenantModel.maxIdentities" />
  </v-flex>
</v-layout>

[我最初的想法是在watch对象上执行tenantModel以捕获字段更改，但是触发tenantModel上的监视的唯一时间是调用了this.tenantModel = new Template({})之类的行；在绑定的字段之一中更改值不会触发它。

[我知道一个选择是为每个字段添加@input或@change处理程序（取决于字段类型），但这很繁琐，而且其他地方有一些字段-例如v-combobox字段-已经具有这些事件的侦听器。

是否有办法对绑定的数据对象进行某种监视？还是我必须在各个字段上添加侦听器？

Answer 1

您是否尝试过deep watcher？