Directiva para VUE para mostrar errores de validación con Laravel

Directiva para VUE para mostrar errores de validación con Laravel

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

Angel Cruz's avatar
Autor
Angel Cruz