Directiva para VUE para mostrar errores de validación con Laravel || Angel Cruz

Acá el como usarla.

instalación

NPM:

1npm i vue-has-error-laravel

Requerirlo en su archivo de componente vue.js:

1import VueHasErrorLaravel from 'vue-has-error-laravel'
2 
3Vue.use(VueHasErrorLaravel)

instrucciones de uso

 1<template>
 2<form method="post" @submit.prevent="updateProfile" enctype="multipart/form-data">
 3   <div class="row">
 4      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
 5          <div class="form-group">
 6              <label>Apellidos</label>
 7              <input type="text" name="lastname" v-has-error="errors.lastname" v-model="user.lastname"  class="form-control" >
 8            </div>
 9      </div>
10      <div class="col-12 col-sm-12 col-md-12 col-lg-12">
11           <div class="mt-2">
12               <button type="submit" class="btn btn-primary" :disabled="buttonDisable">{{buttonText}}</button>
13           </div>
14        </div>
15     </div>
16 </form>
17</template>
18 
19<script>
20export default {
21    data(){
22        return{
23            buttonText:'Guardar cambios',
24            buttonDisable:false,
25            user: {
26                lastname: ''
27            },
28            errors:[],
29        }
30    },
31    methods:{
32        updateProfile(event){
33            this.buttonDisable=true;
34            this.buttonText = 'Guardando cambios...';
35            const formData = new FormData(event.target)
36            axios.post(`${this.apiwebUrl}user/data/update`, formData)
37            .then((resp)=> {
38                this.errors = []
39                this.buttonDisable=false;
40                this.buttonText = 'Guardar cambios';
41            })
42            .catch((error)=> {
43                if (error.response.status == 422) {
44                    this.errors = error.response.data.errors;
45                }
46                this.buttonDisable=false;
47                this.buttonText = 'Guardar cambios';
48            });
49        }
50    }
51}
52</script>

Agrega v-has-error el attribute a tu elemento:

1<div class="col-12 col-sm-12 col-md-6 col-lg-6">
2     <div class="form-group">
3         <label>Apellidos</label>
4         <input type="text" name="lastname" v-has-error="errors.lastname" v-model="user.lastname"  class="form-control" >
5       </div>
6 </div>

Autor

Leonardo Manuel Alvarez

license

MIT

Fuente