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

May 28, 2020

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

Sponsors

Recibe contenido exclusivo por correo

[AC].dev

Made with ♥️ & 🧉 in Montevideo, Uruguay.

Code highlighting provided by Torchlight.

Este sitio web utiliza cookies para mejorar la experiencia del usuario. Al utilizar nuestro sitio web, acepta todas las cookies de acuerdo con nuestra Política de cookies.
Lee más.

RECHAZAR