Особенности ​

Однако при работе с формами важно помнить о следующих вещах:

Фрагментация ​

Если вы передадите значение:

{
  "address.city": "Изумрудный Город"
}

{
  "address.city": "Изумрудный Город"
}

Он преобразуется в:

{
  "address": {
    "city": "Изумрудный Город"
  }
}

{
  "address": {
    "city": "Изумрудный Город"
  }
}

Это основной принцип работы с Form которые необходимо знать. Он может быть очень полезен при работе с GraphQL. Если ключ является составным(имеет разделители .), то он будет разложен.

Это легче показать на примере. Допустим на интерфейсе нам необходимо показать адрес, который состоит из двух полей: Страна и Город. В лучших традициях мы создадим отдельное поле для структуры address и опишем там вышеупомянутые два поля:

// input-address.vue
<template>
    <div>
        <form-field name = "country" label = "Страна"/>
        <form-field name = "city" label = "Город"/>
    </div>
</template>
<script setup lang = "ts">
import {FormField, Form} from "jenesius-vue-form";

const props = defineProps({
    name: String
})
const form = new Form({name: props.name})
</script>

// input-address.vue
<template>
    <div>
        <form-field name = "country" label = "Страна"/>
        <form-field name = "city" label = "Город"/>
    </div>
</template>
<script setup lang = "ts">
import {FormField, Form} from "jenesius-vue-form";

const props = defineProps({
    name: String
})
const form = new Form({name: props.name})
</script>

Далее подключим эту компоненту к нам в проект

// App.vue
<template>
	<input-address name="address"/>
	<form-field name = "address.city" label = "Short City"/>
</template>
<script setup>
import {FormField, Form} from "jenesius-vue-form";
import InputAddress from "./input-address.vue";

const form = new Form();
</script>

// App.vue
<template>
	<input-address name="address"/>
	<form-field name = "address.city" label = "Short City"/>
</template>
<script setup>
import {FormField, Form} from "jenesius-vue-form";
import InputAddress from "./input-address.vue";

const form = new Form();
</script>

Обратите внимание на поле address.city. Если вы запустите данный пример, то увидите, что это поле имеет двухстороннюю связь с полем city внутри input-address.vue. Для обеспечения такого результата Form обрабатывает ввод и упрощает его.

Композиция Значений ​

В форме можно выделить три основных места хранения данных:

pureValues ​

Это самый глубоколежащий объект. Он хранит в себе данные, которые были установлены используя setValues без параметра changed. В основном вы не будете использовать данное свойство, а предпочтёте оставшиеся два.

changes ​

Объект хранит только те поля, которые были изменены. Объект изменяется при использовании change или setValues с параметром change: true. Данный объект используется при сохранении значений, когда нам необходимо вытащить только изменения, не затрагивая значения, которые были не тронуты.

values ​

Объект является динамически вычисляемым и хранит смесь changes и pureValue или иными словами данный объект является результирующим при слиянии первых двух.