通过 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>

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

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

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

Answer 1

你试过了吗deep watcher？

创建此 jsfiddle 供您参考 https://jsfiddle.net/efqy6pmo/

另请查看文档以了解更多选项 https://vuejs.org/v2/api/#watch

参考link：

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

Detecting change in data object members attached to fields via v-model

javascript

forms

object

vuejs2

vue-reactivity