Skip to content

FormKit

FormKit - приятная либа для создания формочек во Vue

^ Ебать какой трейлер для библиотечки

Базовый пример


<FormKit type="form" @submit="submitForm">
    <FormKit type="text" name="name" label="Name"/>
</FormKit>

Биндинг

  • Можно по классике - через v-model, а можно просто name задать:

<FormKit type="text" name="name" label="Name"/>
  • В примере выше, при сабмите формы будет генериться объект с полем name

Форма

  • В html сабмит тега <form> - это POST-метод с formdata
  • Обычно, этого недостаточно, хочется сабмитить форму в методе, отправляя джсончик, хочется валидации, хочется блокировку кнопки
  • И вот в formkit это все из коробки: сабмит - сразу через событие с объектом, валидация сама происходит, кнопка блокируется - полный фарш!

Вывод стейта формы


<FormKit type="form" #default="{ value }">
    <FormKit type="text" name="name" label="Name"/>
    <pre wrap>{{ value }}</pre>
</FormKit>

В pre будет выводиться объект {name: name}

Стили

import {plugin, defaultConfig} from '@formkit/vue'

app.use(plugin, defaultConfig({theme: 'genesis'}))