How it works VueJS-Resource with Laravel Fields validations

I made a plugin using the code Taylor wrote for Laravel\Spark. The plugin includes a couple js classes, Form & FormErrors. It also includes some form field components. Finally, it installs a couple helpers methods onto the Vue prototype so they're available for all your vue models.

End usage might look something like..

    // Vue Model
    data: {
        loginForm: new Form({
            email: '',
            password: ''
        });
    },

    methods: {
        login() {
            this.$postForm('/login', this.loginForm);
        },

        // or if you prefer this.
        login(form) {
            this.$postForm('/login', form);
        }
    }
    ...
    <form class="form">
        <fieldset class="fieldset">

            <email-field label="Email"
                         name="email"
                         :input.sync="form.email"
                         :form.sync="form">
            </email-field>

            <password-field label="Password"
                            name="password"
                            :input.sync="form.password"
                            :form.sync="form">
            </password-field>

            <div class="buttongroup">
                <button type="button"
                        class="button"
                        @click="login(form)">
                    Login
                </button>
            </div>

        </fieldset>
    </form>

The field component templates check use v-if to shows for errors which are added to the form object after it's been submitted and received a response with errors.

Everything on the Laravel side stays the same.

Would be happy to share my code, but it's not packaged for npm or anything. Just looking at Laravel\Spark may be a big help, it got me through.

Thank you for your reply @cklouman

But my was with Validating through Custom Request Class, though, do we need to create customer components for email-field and password-field ?

Get the errors :

this.resource.update({id: 1}, {items:this.item }, function (data, status, request) {
        // Code on success
            }).error(function (data) {
        // Code on validation error in data        
        this.error.content = data.content[0];        
            });    

You can bind error in your HTML :

<textarea rows="8" v-model="updateData.content" class="form-control" name="content" id="content" required></textarea>
<small class="help-block">{{ error.content }}</small>

Thanks.. I will try this

@cklmercer May you share your plugin with us? Thanks!!