Better Laravel Vue form

Last update: May 29, 2019

Better Laravel Vue form

Installation

  • npm npm install better-laravel-vue-form --save

  • yarn yarn add better-laravel-vue-form

Usage

">
<template>
    <div>
        <input v-model="form.test" type="text" />

        <button @click="submit">sendbutton>
    div>
template>

<script>
import Form from 'better-laravel-vue-form'

export default {
    data: () => ({
        form: new Form({})
    }),

    methods: {
        submit() {
            this.form.post('/test').then(({ data }) => console.log(data))
        }
    }
}
script>

Validation

To verify if exists any error for a specific field and then, get the error value

{{ form.errors.get('test') }}
">
<template>
    <div>
        <input v-model="form.test" type="text" :class="{ 'is-invalid': form.errors.has('test') }" />
        <small v-if="form.errors.has('test')">{{ form.errors.get('test') }}small>

        <button @click="submit">sendbutton>
    div>
template>

<script>
import Form from 'better-laravel-vue-form'

export default {
    data: () => ({
        form: new Form({})
    }),

    methods: {
        submit() {
            this.form.post('/test').then(({ data }) => console.log(data))
        }
    }
}
script>

Credits

Developed by DevSquad Team

GitHub

https://github.com/tenlisboa/better-laravel-vue-form
You might also like...

Vue JSON form - 基于vue 通过 json 呈现视图

Vue JSON form 通过 JSON 呈现任何组件与定义脚本的实现 使用任何 Vue 组件或 html 元素构建视图 开发 vue 项目时,可能会遇到以下需求场景 界面以及交互行为需要通过配置动态呈现 定义的配置需要进行存储和读取 配置需要通过可视化界面进行编辑 普通 JSON 数据虽然可以描

Jun 16, 2022

A plugin for Vue Formly which adds multiple form fields according to Twitter Bootstrap

vue-formly-bootstrap A plugin for Vue Formly which adds multiple form fields according to Twitter Bootstrap. Version 2 Note that this is version 2 of

Dec 31, 2020

System76 form Vue components including buttons, inputs, and labels. It also holds client side validation logic

@system76/forms System76 Vue components for forms This repository contains all the System76 form Vue components including buttons, inputs, and labels.

Mar 24, 2021

A form library for vue, inspired by Formik for react

vue-simpleform A form library for vue, inspired by Formik for react Is it really simple? I think it is, but really I couldn't think of a better name B

May 10, 2022

Create a dynamic form usign a set of custom Vue.js components

Create a dynamic form usign a set of custom Vue.js components

Nov 24, 2017

Vue application with login form for be included in a single-spa application as registered app.

Vue application with login form for be included in a single-spa application as registered app.

This is a Vue application example used as NPM package in single-spa-login-example-with-npm-modules in order to register an application. See the installation instructions there.

Mar 4, 2022

A Vue component to implement a feedback form for users to give feedback on your application, with integration of a Slackwebhook.

A Vue component to implement a feedback form for users to give feedback on your application, with integration of a Slackwebhook.

Apr 12, 2019

Vuelidate form-group helper that extracts errors easily.

Vuelidate form-group helper that extracts errors easily.

Vuelidate-error-extractor makes error message display from vuelidate a breeze. Be it for a single form element or all displaying all the errors in a form.

May 12, 2022

A Vuejs component to display Form validation errors

vue-form-error A simple Vuejs component that can be used to display form validation errors on inputs. Demo https://codesandbox.io/s/vue-form-error-kwj

Mar 31, 2022
Library that help to submit form and handle validation in Laravel Vue Application

vue-js-form-helper This is a small library that makes form submit and validation easier to use. Installation npm i vue-js-form-helper Code Example The

Sep 9, 2020
Clean & minimal vue form elements and form builder with validation

Vue Form Components Documentation https://antonreshetov.github.io/vue-form-components Install NPM Installing with npm is recommended and it works seam

May 21, 2022
Text and textarea fields with a character counter for Laravel Nova.
Text and textarea fields with a character counter for Laravel Nova.

Nova Charcounter Fields Text and textarea fields with a character counter for Laravel Nova. Installation You can require this package using composer:

Feb 17, 2022
:clipboard: A schema-based form generator component for Vue.js
:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

Jul 4, 2022
a vue form component just like json-editor

vue-awesome-form a vue form component just like json-editor Install # npm/yarn npm install vue-awesome-form yarn add vue-awesome-form Use register th

Feb 8, 2021
Vue dynamic nested form component, support nested Object/Hashmap/Array.
Vue dynamic nested form component, support nested Object/Hashmap/Array.

Introduction vue-dynamic-form-component is a dynamic form component base on element-ui and async-validator. You just need to write descriptors(referen

Jun 25, 2022
a comprehensive vue.js form component

Vue Formular Note: Users of Vus.js version 2 please use this package instead This vue.js package offers a comperhensive solution for HTML form managem

Dec 10, 2019
Tailwind checkout form built with vue.js
Tailwind checkout form built with vue.js

tailwind-vue-checkout-form Result: or: Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for pr

Nov 28, 2021
Vue.js Commerce.js plugin and wrapper chec-payment-form component for checkout flow

Vue.js Commerce.js plugin and wrapper chec-payment-form component for checkout flow

Oct 1, 2020