Реактивность ​

На предыдущих страницах описана работа с формами, получение и установка значений, работы с доступностью. Касаемо реактивности и взаимодействием с Vue описано в этой статье.

Реактивные значения ​

Для получения реактивного объекта формы воспользуйтесь хуком useFormValues(). Хук принимает единственный параметр экземпляр класса Form:

import {Form, useFormValues} from "jenesius-vue-form";

const form = new Form();
const values = useFormValues(form); // Реактивный объект значений

import {Form, useFormValues} from "jenesius-vue-form";

const form = new Form();
const values = useFormValues(form); // Реактивный объект значений

Реактивное поля ​

Если вам необходимо отслеживать какое-то именное поле формы, воспользуйтесь ComputedValue. По умолчанию данная функция принимает два объекта: экземпляр класса Form и имя поля. Однако класс Form можно опустить, если необходимо получить значение из родительской формы.

Параметры ​

form Необязательное ​

Экземпляр класса Form у которого происходит отслеживание значения формы.

name Обязательное ​

Строковое название поля.

Возвращаемое значение ​

Функция вернёт Ref<any>.

Примеры ​

Реактивное значение у формы ​

В данном примере мы напрямую передаём форму из которой будем получать значение.

import {Form, ComputedValue} from "jenesius-vue-form";

const form = new Form();
const nameValue = ComputedValue(form, 'name');

import {Form, ComputedValue} from "jenesius-vue-form";

const form = new Form();
const nameValue = ComputedValue(form, 'name');

const form = new Form()
const nameValue = ComputedValue('name'); // Ошибка

const form = new Form()
const nameValue = ComputedValue('name'); // Ошибка

В дочернем элементе ​

Если в родительском элементе у нас определён экземпляр Form, то в дочернем уже можно его не указывать:

// parent.vue
const form = new Form()

// child.vue
const ageValue = ComputedValue('age'); // Будет работать!

// parent.vue
const form = new Form()

// child.vue
const ageValue = ComputedValue('age'); // Будет работать!

Реактивное состояние ​

Для получения реактивного состояния формы(доступность, изменение) необходимо воспользоваться useFormState и передать туда экземпляр формы.

const form = new Form();
const state = useFormState(form); // { changed, disabled }

const form = new Form();
const state = useFormState(form); // { changed, disabled }

Реактивное состояние имеет следующий интерфейс:

interface FormReactiveState {
	changed: boolean,
	disabled: boolean,
	wait: boolean
}

interface FormReactiveState {
	changed: boolean,
	disabled: boolean,
	wait: boolean
}