Vuex Forms — удобный инструмент для работы с формами и Vuex

Скрипт дает возможность осуществлять управление или валидацию формы, как на стороне клиента, так и на стороне сервера. Комплексное решение для управления версиями для Vue.js, построенное с учетом Vuex.

Описание инструмента

Устали изобретать колесо каждый раз, когда вам нужно проверить формы в новом проекте? Этот пакет предназначен для обеспечения простого и единообразного способа проверки ваших форм и отображения сообщений проверки, хотя для этого требуется минимальная настройка. Приведенный в действие надежной системой проверки Vuelidate, этот пакет просто добавляет к этой библиотеке  функциональности, предлагая сообщения проверки и входящие компоненты, синхронизирующие из коробки.

Этот пакет предназначен только для обработки ваших форм и не вмешивается в остальные части вашей архитектуры. Хотя методы для Vuex или Ajax-представления включены, вы можете легко реализовать свою логику в любой момент.

Использование пакета

Установка:

$ npm install vuex-forms --save

или

$ yarn add vuex-forms

или

<script src="vuex-forms/dist/VuexForms.min.js"></script>

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

HTML

<form name="basic-form" @submit.prevent="form.submit()">

    <vuex-text label="Name"
               id="name"
               name="name"
               v-input-sync:name="form"
    ></vuex-text>

    <vuex-text type="email"
               label="Email"
               id="email"
               name="email"
               v-input-sync:email="form"
    ></vuex-text>

    <vuex-text type="tel"
               mask="(###) ###-####"
               label="Phone"
               id="phone"
               name="phone"
               v-input-sync:phone="form"
    ></vuex-text>

    <vuex-text label="Zip Code"
               mask="#####-####"
               :save-mask="true"
               id="zip"
               name="zip"
               v-input-sync:zip="form"
    ></vuex-text>

    <div class="has-text-centered">
        <button type="submit" class="button">Submit</button>
        <button type="reset" class="button" @click="form.reset()">Reset</button>
    </div>
</form>

JavaScript

import { Form } from "vuex-forms"

export default {
    data () {
        return {
            form: new Form(this, {
                name: null,
                email: null,
                phone: null,
                zip: null,
            }),
        }
    }
}

Разработчик скрипта представляет отличную документацию, где можно найти все возможные конфигурации. Пусть работы с формами теперь приносит удовольствие!