0

我有一个使用 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行 like 时this.tenantModel = new Template({})；更改绑定字段之一中的值不会触发它。

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

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

4

1 回答 1

0

你试过deep watcher吗？

创建了这个 jsfiddle 供您参考 https://jsfiddle.net/efqy6pmo/

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

参考链接：Vue.js - 如何正确观察嵌套数据

于 2019-10-16T20:32:29.067 回答