cretueusebiu/vform

Handle Laravel-Vue forms and validation with ease.

Handle Laravel-Vue forms and validation with ease

vform is a tiny library for Vue 2/3 to help with forms and validation when using Laravel as a back-end.

It provides a form instance to wrap your data in a convenient way and send it to your Laravel application via an HTTP request using axios.

Installation

npm install axios vform

Basic Usage

<template>
  <form @submit.prevent="login" @keydown="form.onKeydown($event)">
    <input v-model="form.username" type="text" name="username" placeholder="Username">
    <div v-if="form.errors.has('username')" v-html="form.errors.get('username')" />

    <input v-model="form.password" type="password" name="password" placeholder="Password">
    <div v-if="form.errors.has('password')" v-html="form.errors.get('password')" />

    <button type="submit" :disabled="form.busy">
      Log In
    </button>
  </form>
</template>

<script>
import Form from 'vform'

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

  methods: {
    async login () {
      const response = await this.form.post('/api/login')
      // ...
    }
  }
}
</script>

Laravel Controller:

<?php

class LoginController extends Controller
{
    public function login(Request $request)
    {
        $this->validate($request, [
            'username' => 'required',
            'password' => 'required',
        ]);

        // ...
    }
}

Documentation

You'll find the documentation on vform.vercel.app.

Changelog

Please see CHANGELOG for more information what has changed recently.

vform's Issues

Check if the error field is array or string

https://github.com/cretueusebiu/vform/blob/master/src/FormErrors.js#L24

Non-minimized version in NPM?

I often explore my libs in-IDE, it would be handy if a not-minified file was distributed.
(The sourcemap doesn't get applied in IntelliJ/PHPStorm)

update version

in NPM package at 19 feb 2018, not latest master

Can't upload file to server

Hello
I'm having trouble uploading form file to server. I follow this example. I do not know what's wrong with my code. Please help.

This is my code for post to server (When clicked Submit button)

update() {
   this.form
   .post('/settings/profile', {
      // Transform form data to FormData
      transformRequest: [
        function(data) {
          return objectToFormData(data)
        }
      ]
    })
   .then(({ data }) => {
     this.$store.dispatch('auth/updateProfile', { data })
   })
}

Before upload to server I monitor the form object using console.log() the avatar field contain file data.

Then upload the file to the server, each field works correctly except for the avatar field (it is empty).

I don't understand where the data is missing

Thank you.

Validation errors

Hi ,

I want to validate an array of objects but when I do the error feedback doesn't get sent back to the form field. Example I have simple form like

details : {
         id: ' ',
         name: ' '
}

And I'm using laravel to validate the request but when it returns the error say details.name is field is required feedback is not shown on field nor error displayed. Basically what I want to do is something simple like triggering the main field to display an error like details field required. I'm not sure if this can be handled in the laravel itself or by tweaking the form to react to this situation. Thanks in advance

How to avoid ugly errors in console on form validation fails?

Hi, i'm very new to Vue, and have simple question;

When laravel returns with 422, dev console shows the following error.

Uncaught (in promise) Error: Request failed with status code 422
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

When we surround the await statement with a try catch, error goes away but form errors are not rendered. I want to suppress this error, and I also want to do something else when the form.post call fails.

// Register the user.
const {data} = await this.form.post('/api/register');

Thanks for this work and for your help!

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

vuex state
`const state ={

form: new Form({

        id:null,
        fullname: null,
        username: null,
        email: null,
        password: null,
        role:null
    }),

}`
vuex action

`
const action ={

storeData({commit,state}){
    commit('LOADING');
    return new Promise((resolve, reject)=>{
        let params = _.cloneDeep(state.form)

        axios.post(APP_CONFIG.API_URL+'/users',params)
        .then(response =>{
            commit('RESET_STATE')
            resolve();
        })
        .catch(error =>{
            //commit('ERROR',error)
            //reject(error)
        });
    });
},

}`

npm ERR! A complete log of this run can be found in:

Hello everyone here. am working on laravel & Vuejs project, it was working fine but suddenly developed a problem. The error started when i was installing vform. I've tried many solutions online but still not working. Your help is highly appreciated. here's the error:
npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://npm.community

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Isoft\AppData\Roaming\npm-cache_logs\2018-12-28T01_28_24_979Z-debug.log

how to do with vform post with header multipart/form-data

how to do with vform post with header multipart/form-data?
I saw your example is when select input file it do ajax file upload.
But for my case, I need to submit together with other form data. I am upload an excel file
Is there any way In your this.form.post(), to add the header info?

How to use it without Nodejs

Hello,

I use Vuejs without NodeJs.
How can I use vform?

Thanks.

Submit form with a submit button outside the form

Template code.

<form id="answerForm" @submit.prevent="createAnswer" @keydown="form.onKeydown($event)">
   <input type="text" name="title" v-model="form.content">
</form>

<v-button type="primary" @click.prevent="answerSubmit" class="btn-sm" :loading="form.busy">Submit</v-button>

I created answerSubmit() method inside Vue.js for submit form. But does not work.

answerSubmit () {
   document.getElementById('answerForm').submit()
},

PS. I'm using https://github.com/cretueusebiu/laravel-nuxt starter

validate a select field

I am validating the fields of a form and everything works very well, however I would like to know if it is possible to remove the error class to the select fields, this works well in a field of type text that is required, when writing this remover the error class, but in a select field that is required and I choose one of the options it keeps the error class, until I realize the submit. Is it possible to remove the error clause as soon as one of the options is selected ??

422 (Unprocessable Entity)

Thanks for the great package firstly.

I still have the issue of showing 422 error in console after validation fails.

Here is my code.

`

methods:{

    async addMember(){
        try {
            await this.form.post('/api/user')
            this.form.reset()
            alert("User Created")
        } catch (e) {
            // console.log(e)
          }
    }
}

`

When validation fails, it should give the error in console. How can I avoid the error.

Thanks.

When form values are objects and the objects are null it thrown an exception when fill

So I have this form and I get an user to populate the form:

form: new Form({
        name: null,
        email: null,
        address: {
          country: 'MX',
          state: null,
          city: null,
          suburb: null,
          zip: null,
          number: null,
          interior_number: null,
          street: null
        },
      }),

this.form.fill(user)

Everything ok but sometimes the user.address is null, in that cases when I call the fill method seems like the address object is setted to null and not the full object, so in the v-model (for example form.address.street) throws an exception Cannot read property 'state' of null

MThe fill method should fill the form as constructed don't you think? or maybe create a method like fillStrict or something?

Would the vform be commatable with vue-auth?

I use vue-auth with this code:

login () {
  this.isloginting = true
  this.$auth.login({
    data: this.user,
    rememberMe: this.checked,
    success () {
      this.isloginting = false
      this.$router.push({ path: '/users' })
    },
    error (error) {
      // alert(JSON.stringify(this.user.errors))
      console.log(this.user.erros)
      this.errors.record(error.response.data)
      this.isloginting = false
    }
  })
}

But the vform asks to use it like this:

login () {
      // Submit the form via a POST request
      this.form.post('/auth/login')
        .then(({ data }) => { console.log(data) })
    }

Would the vform be commatable with vue-auth?

Can it work with Nuxt.js Axios Module ?

I want to use vform with Nuxt.js Axios Module using the code below. But it does not work properly. It does not send any requests to the server. Previously, I had used the normal axios plugin, it could work properly.

async create({ commit }, params = {}) {
    commit('CREATING')
    try {
      const { data } = await params.form.post(`questions/${params.question}/answer`)
      commit('CREATE_SUCCESS', data)
    } catch (e) {
      commit('CREATE_FAILURE', e.message)
    }
 },

The axios module. using this format

async create({ commit }, params = {}) {
    commit('CREATING')
    try {
      const { data } = await this.$axios.$post(`questions/${params.question}/answer`)
      commit('CREATE_SUCCESS', data)
    } catch (e) {
      commit('CREATE_FAILURE', e.message)
    }
  },

Is possible to be able to use form with Nuxt.js Axios Module ?
Thank you for suggestion

Uncaught TypeError: this.$form is not a function

Hi,

first I want to say thank you for vform. I am using Laravel 5.3 and VueJS. I install vform via npm and in my bootstrap.js I have ('vform');

But I always get this error when I try to use a component with vform.

Uncaught TypeError: this.$form is not a function

how to wrote a code for "if has error, do this function?"

i wrote this code, but i get error:

                if (this.form.any() == true) {
                    alert('true');
                }

error:

this.form.any is not a function

and this is my form:

form: new Form({
                    name: '',
                    email: '',
                    password: '',
                    type: '',
                    photo: '',
                    bio: ''
                })

problem with loading icon

at the moment everything works correctly, except for the button loader, I am using laravel 5.6, which brings bootstrap 4.0.0 by default and also install font-awesome 4.7 in my project, is there any other configuration? I do not understand why I can not see the loader.

Uncaught TypeError: Cannot call a class as a function

Hi,

I followed the instructions but I get the following error in my console:

Uncaught TypeError: Cannot call a class as a function

Any idea?

Form inside v-for

Hello @cretueusebiu,

im very new on vuejs and im trying learn this awesome framework..

I have a simple question.

How I can implement this vform inside a v-for?

Here's an example:

https://shrib.com/#TIbHYwTTLsxgtll0Pw.b
I can't put the code in this editor, i dont know why.

what's the correct way to implement this? because when I send the form, the form send again all data not the form where I trigger the submit.

If i put this on a separate component this work as expected but its correct? I need put the forms in separate component if is inside in a v-for? its some crazy for my brain!, imagine if you have 5 or 6 forms! it would 5 or 6 components?

How to upload Image in Vform

I have other fields with the vform. So how do I upload the image

                 <div class="form-group">
                    <select v-model="form.category_id" id="category" name="category" 
                        
                        class="form-control" :class="{ 'is-invalid': form.errors.has('category') }">
						<option v-for="category in categories.data"  :value="category.id" v-bind:selected="category.id != null">{{category.name}}</option>
					</select>
                    <has-error :form="form" field="category"></has-error>
                </div>

                 <div class="form-group">
                    <input v-model="form.featured" id="featured" type="file" name="featured"
                        placeholder="Featured Image" @change="selectFile"
                        class="form-control" :class="{ 'is-invalid': form.errors.has('featured') }">
                    <has-error :form="form" field="featured"></has-error>
                </div>

how can upload file with put on update form

I have a form with multipart/form-data and the API for the update with put/patch, I'm using the code below to upload the file but the request on the server side is empty! the inspect shows the data has been sent but the server and laravel update method shows request is empty! how can I solve it?

                    // Transform form data to FormData
                    transformRequest: [function (data, headers) {
                        return objectToFormData(data)
                    }]
                }).then(() => {
                   // do some stuff  
                }).catch((e) => {
                    // do some stuff  
                    }
                );

Issue on select and textarea

error message is not working for input type select and textarea

<div class="col-md-7">
              <select v-model="form.category_id" name="category_id" class="form-control">
                <option v-for="category in company_categories" v-bind:value="category.id">{{category.name}}</option>
              </select>
            <has-error :form="form" field="category_id"/>
          </div>

<div class="col-md-7">
            <textarea v-model="form.description" class="form-control" name="description" rows="4"></textarea>
            <has-error :form="form" field="description"/>
          </div>

Laravel has error response with this keys but it does not work if input types are select and textarea. haven't tested on other input types yet, it only work on text type for me.

Use this with SPA

Nice day,

have way to use it from a SPA (vue-cli webpack)? the Form instance make the requests and observe if flash message of validations erros, how to make it with a rest api? i try, but i can't use axios for requests.

ty

Loading data into form

I've been looking for an example on loading data into a form, but haven't found anything. Looking at the code didn't really help, here's why.

Here's the PHP code:

public function get()
{
    return response()->json(
        [
            'name' => 'My Customer',
            'email' => '[email protected]',
        ]
    );
}

My first though was that I could simply call the get method and it would set originalData:

this.form.get('/api/sales/customers/1')

But that doesn't seem to happen, the get method only returns the data.

I then try to find a way to set the data from outside the form class, but that didn't work either.

I could set the data by creating a new form object, but since I already had to create one to fetch the data that seems to be wrong. What am I missing?

Reset form to default state

Has anyone figured out the best way to reset the form to its original state? Right now, I am popping an edit form in a modal dialog box and I am trying to clear it out on close.

Date inputs

If I use a date input, VForm doesn't display the date when I use the form for change

For example

<div class="form-group"> <label>Start Date</label> <input v-model="form.start_date" type="date" name="start_date" placeholder="Start date" class="form-control" :class="{ 'is-invalid': form.errors.has('start_date') }"> <has-error :form="form" field="start_date"></has-error> </div>

When I load the vform for editing using the following, all the various inputs work correctly except for date fields

// setup the modal ready for EDIT this.editmode = true; this.form.reset(); this.form.fill(campaign);

Is there something different that I need to do for date fields compared to the other inputs?

Thanks

Post function sends String [object Object] instead of parameters when attaching a file

I'm using vforms 0.8.2 and axios 0.17. I'm new at vforms, but I ran into this issue. When you use vforms with a field being an array everything works fine, i.e.:

new Form({ 
  description: 'some value',
  documentation: null,
  products: [ { code: "apple", price: 5 } , { code: "orange", price: 2.5 } ]
});

When doing a this.form.post() from a vue method, it works as expected by sending a json to the desired url. However when you attach a file to the form data, the sent data becomes multipart (obviously for handling the file) but any array/object field (in this case products) is sent as a string "[object Object]":

The request payload sent is this one:

------WebKitFormBoundarykcEGETElI1QRyPXB
Content-Disposition: form-data; name="documentation"; filename="test.zip"
Content-Type: application/x-zip-compressed

------WebKitFormBoundarykcEGETElI1QRyPXB
Content-Disposition: form-data; name="products"

[object Object]
------WebKitFormBoundarykcEGETElI1QRyPXB--

Instead of this:

------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="documentation"; filename="test.zip"
Content-Type: application/x-zip-compressed

------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="products[0][code]"

apple
------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="products[0][price]"

5
------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="products[1][code]"

orange
------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="products[1][price]"

2.5
------WebKitFormBoundaryxew11gK9NAMhdxsN--

Unfortunately, this is my first time with vue, and node.js in general so i'm not sure how I can implement the fix, but the solution is to make sure that object parameters are properly encoded when the post request is a multipart/form-data. I researched that flat module could flatten an object but it doesn't adhere to php notation of using brackets for array parameters.

How use validate form with array ?

Example :

[Vue data]

form = new Form({
    id: '',
    code: '',
    fruits = [
        {id: 1, name: "banana", qty:''},
        {id: 2,name: "apple", qty:''},
    ]
});

[Vue template]

<input type="text" 
            v-model="form.fruits.qty"
            name="qty"
            id="qty"
             :class="{ 'is-invalid': form.errors.has('qty') }">
<has-error :form="form" class="ml-3" field="qty"></has-error>

[Laravel validate]

$this->validate($request, [
     'fruids.0.qty' => 'required|numeric'
]);

I will check validate with array, but i not know syntax in Vue template
please let me know.

implement vform in vuetify

I really like this library and I have been using it, I have a doubt since I am not an expert, it is possible to use it without boostrap ?, right now I am using vuetify and I would like to use vform, this is possible or has some problems. I hope I remove the doubt ..

work with photos

can you add fields for images?

Ability to add more data to the form dynamically

I was wondering if it's possible to add more data to the form after it's been instantiated?

For example (psuedo code):

<template>
    <select v-model="form.approvers" multiple id="approvers" name="approvers"></select>
</template>

<script>
export default {
    data() {
        return {
            form: new Form({
                approvers: [],
            })
        }
    }

    mounted() {
         $('#approvers').select2({
            placeholder: "Enter approvers ",
        });
    },

    methods: {
        save() {
            // Ex.
            this.form.setData(key, value);

            this.form.post();
        }
    }
}
</script>

I have a multi-select form input that is constructed using Select2, but using v-model="form.approvers" on the select doesn't seem to post the selected values from select2.

Do you know of any ways around this or why it might not be grabbing the values from the select input?

Thanks! :)

Original Data not reflected on parent component

Hello, im using vform on a custom component where im passing default data as a prop

Component 1

<template>
  <my-form :original-data="report">
     <template slot-scope="{form}">
       //... bunch of form fields
     </template>
   </my-form>
</template>

report is an object received as a prop from a parent component (AKA Component 0)

And my-form component defines form:

Component 2

data () {
    return {
      form: new Form(this.originalData)
    }
  }

My problem is that when I input some data on the form, the form objects reflects the value changed for the input modified, but the report object on the "Component 1" never gets the data modified.

How could i reflect the change on "Component 1" as i need to hide some fields there with a computed property based on the value of a property on the report object.

errors not displayed on return with error 422

I'm getting a 422 error while getting the return from a Laravel's Form Request Validation class, but the component are not being displayed...

POST http://project.build/save-account 422 (Unprocessable Entity)

register.js?id=51eaeeff0b3abd47a38c:5169 Uncaught (in promise) Error: Request failed with status code 422
    at createError (register.js?id=51eaeeff0b3abd47a38c:5169)
    at settle (register.js?id=51eaeeff0b3abd47a38c:5320)
    at XMLHttpRequest.handleLoad (register.js?id=51eaeeff0b3abd47a38c:4730)

What I can do to solve this problem???

Laravel 5.5

Hi,

i installed it via npm and use Laravel 5.5.

This is my app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

import router from './router'

// vForm
import { Form, HasError, AlertError } from 'vform'


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app',
    router
});

In chrome devtools I get the following error.

[Vue warn]: Error in data(): "ReferenceError: Form is not defined"

found in

---> <Profile> at resources\assets\js\components\settings\Profile.vue
       <Settings> at resources\assets\js\components\settings\Settings.vue
         <Root>
warn @ app.js:sourcemap:1356
handleError @ app.js:sourcemap:1439
getData @ app.js:sourcemap:4112
initData @ app.js:sourcemap:4069
initState @ app.js:sourcemap:4000
Vue._init @ app.js:sourcemap:5171
VueComponent @ app.js:sourcemap:5343
createComponentInstanceForVnode @ app.js:sourcemap:4620
init @ app.js:sourcemap:4437
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1443 ReferenceError: Form is not defined
    at VueComponent.data (app.js:sourcemap:44878)
    at getData (app.js:sourcemap:4110)
    at initData (app.js:sourcemap:4069)
    at initState (app.js:sourcemap:4000)
    at VueComponent.Vue._init (app.js:sourcemap:5171)
    at new VueComponent (app.js:sourcemap:5343)
    at createComponentInstanceForVnode (app.js:sourcemap:4620)
    at init (app.js:sourcemap:4437)
    at createComponent (app.js:sourcemap:6092)
    at createElm (app.js:sourcemap:6035)
handleError @ app.js:sourcemap:1443
getData @ app.js:sourcemap:4112
initData @ app.js:sourcemap:4069
initState @ app.js:sourcemap:4000
Vue._init @ app.js:sourcemap:5171
VueComponent @ app.js:sourcemap:5343
createComponentInstanceForVnode @ app.js:sourcemap:4620
init @ app.js:sourcemap:4437
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1356 [Vue warn]: Property or method "form" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <Profile> at resources\assets\js\components\settings\Profile.vue
       <Settings> at resources\assets\js\components\settings\Settings.vue
         <Root>
warn @ app.js:sourcemap:1356
warnNonPresent @ app.js:sourcemap:2516
get @ app.js:sourcemap:2557
render @ app.js:sourcemap:44918
Vue._render @ app.js:sourcemap:5075
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1356 [Vue warn]: Property or method "form" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <Profile> at resources\assets\js\components\settings\Profile.vue
       <Settings> at resources\assets\js\components\settings\Settings.vue
         <Root>
warn @ app.js:sourcemap:1356
warnNonPresent @ app.js:sourcemap:2516
get @ app.js:sourcemap:2557
render @ app.js:sourcemap:44921
Vue._render @ app.js:sourcemap:5075
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1356 [Vue warn]: Property or method "form" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <Profile> at resources\assets\js\components\settings\Profile.vue
       <Settings> at resources\assets\js\components\settings\Settings.vue
         <Root>
warn @ app.js:sourcemap:1356
warnNonPresent @ app.js:sourcemap:2516
get @ app.js:sourcemap:2557
render @ app.js:sourcemap:44928
Vue._render @ app.js:sourcemap:5075
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1356 [Vue warn]: Error in render function: "TypeError: Cannot read property 'errors' of undefined"

found in

---> <Profile> at resources\assets\js\components\settings\Profile.vue
       <Settings> at resources\assets\js\components\settings\Settings.vue
         <Root>
warn @ app.js:sourcemap:1356
handleError @ app.js:sourcemap:1439
Vue._render @ app.js:sourcemap:5077
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1443 TypeError: Cannot read property 'errors' of undefined
    at Proxy.render (app.js:sourcemap:44928)
    at VueComponent.Vue._render (app.js:sourcemap:5075)
    at VueComponent.updateComponent (app.js:sourcemap:3454)
    at Watcher.get (app.js:sourcemap:3797)
    at new Watcher (app.js:sourcemap:3786)
    at mountComponent (app.js:sourcemap:3458)
    at VueComponent.Vue$3.$mount (app.js:sourcemap:8861)
    at VueComponent.Vue$3.$mount (app.js:sourcemap:11051)
    at init (app.js:sourcemap:4443)
    at createComponent (app.js:sourcemap:6092)

Any idea?

Axios interceptors not working (Authorization header not being attached)

Hi, I don't know if this is the right place to create this issue but anyways, I'm toying around with your laravel-vue-spa starter app when I encounter this issue.

The authorization header (on your util/interceptors.js) is not being attached if I use this library to perform ajax request (e.g. on. pages/settings/_profile.vue@update() method). but if I use axios alone, it works.

I'm trying to re-create your starter app from scratch to get me familiarized with the setup so I did the following

1. Installed Laravel 5.4
2. Installed Laravel Passport for API authentication
3. Installed NPM Packages that I need (see below):
4. Copied your resources/assets/* files to my resources/assets folder
5. run npm run dev

Login and Registration works fine.

package.json

"devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-stage-2": "^6.22.0",
    "cross-env": "^3.2.3",
    "laravel-mix": "0.*",
    "svg-sprite-loader": "^0.3.0"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.2.1",
    "js-cookie": "^2.1.4",
    "lodash": "^4.17.4",
    "sweetalert2": "^6.5.5",
    "tether": "^1.4.0",
    "vform": "^0.7.3",
    "vue": "^2.2.6",
    "vue-meta": "^0.5.5",
    "vue-router": "^2.3.1",
    "vuex": "^2.2.1",
    "vuex-router-sync": "^4.1.2"
  }

.babelrc

{
    "presets": ["es2015", "stage-2"],
    "plugins": ["transform-runtime", "transform-async-to-generator"]
}

How upload image/file?

i was using FormData() for file/image upload. but i dont know how to implement with this. please help me

Axios compatibility

Custom axios (from Nuxt)

I want to use @nuxtjs/axios with my own handlers. Is there a way to use this axios instance instead of default one?

Disable form button until server response

Is there any way to disable sending form again until server response ?

Uncaught TypeError: Cannot read property 'installed' of undefined(…)

Hi,

I really like vform and I used it before. See my other Issue. In a new Laravel 5.3 (with Elixir) project with VueJS 2 I get the following error.

Uncaught TypeError: Cannot read property 'installed' of undefined(…)

This my app.js and everything like vue-resource and vue-router is working. But not vue-form.

/**
* Load JavaScript dependencies
 */

require('./bootstrap');

/**
 * Import Vue, VueRouter and VueForm
 */

import Vue from 'vue'
import VueForm from 'vform'
import VueRouter from 'vue-router'

/**
 * Import Users Components
 */
import UsersIndex from './components/users/Index.vue'
import UsersShow from './components/users/Show.vue'
import UsersCreate from './components/users/Create.vue'

/**
 * Use VueRouter and VueForm
 */

Vue.use(VueForm)
Vue.use(VueRouter)

/**
 * Create Router 
 */
const router = new VueRouter({

  mode: 'history',
  
  routes: [

    { 
      path: '/users', 
      component: UsersIndex
    },

    { 
      path: '/users/create', 
      component: UsersCreate
    },

    {
      path: '/users/:id',
      name: 'user',
      component: UsersShow
    }

  ]
})

/** 
 * Create Vue Instance | Inject Router
*/
new Vue({

    router
 
}).$mount('#app')

Do you have any idea?

set error

hi,
can i set error for input like this:
this.form.errors.username = "some error";

sometimes error don't come from server or errors is not validation error, like simple client form validation and i need to show errors with set error method but i don't know how.

thanx for the help.

Thanks

Just wanted to say thanks for this awesome package. Makes validation and form handling so easy!

I've used it in a bunch of internal sites already.

Really really appreciate it, thanks again! 😄

Reset specific form inputs

I want to know it's possible to reset specific form inputs, for example only passwords inputs after update a register.

Thanks in advanced.

Success Example

Can you integrate the Success Alert in your Example?

Thanks! Serverjunge

How can I apply another CSS Framework?

I want to use the package, but in my project I do not use Bootstrap. Currently using Bulma. Is there any simple way to use the css framework without having to modify dependency?

Support vue-i18n

Do you have plans for support vue-i18n?

[Bootstrap 4] Adding 'd-flex' class to HasError component

For bootstrap 4 there is an issue that the is-invalid error message won't be displayed unless it's a child element of the input.

This means for input-group's and form-group's, the error message isn't displayed since it's default is display:none:

twbs/bootstrap#23454

So far the only clean solution to this has been forgetting the input box itself and apply the d-flex class onto the error message div so at least that is displayed.

What are your thoughts on applying this to the HasError component?

Scroll to the first input field and focus when validation fail

I have a long form with submit button at the bottom of the form. I have multiple input fields in the form marked required from sever side. So when one of the few input fields at the top of the form are left blank and I scroll down to click submit, the error message came out below each input field However, I have to scroll up all the way to the top to enter the input. How can I make it automatically scroll up to focus on the first input error?

I really appreciate it.