У меня есть приложение Vue большого размера, использующее Vuetify, которое состоит в основном из форм, и мне нужно добавить функцию обнаружения, когда было внесено изменение в значение в любом из полей формы, чтобы при переходе пользователяот формы и несохраненных изменений, их можно предупредить. Я могу справиться с настройкой значений, чтобы указать изменения и выдать предупреждение, но первое, что мне нужно сделать, это уметь обнаруживать изменения в различных полях.
Базовая структура:
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, в которых уже есть прослушиватели этих событий.
Есть ли способ наблюдать за связанным объектом данных? ? Или я собираюсь добавить слушателей на отдельных полях?