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

Angel Cruz
Angel Cruz

28 DE mayo DE 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

Te podrá interesar
Aprende cómo crear reglas personalizadas en Cursor IDE paso a paso. Incluye ejemplos, mejores prácticas y un generador de reglas online para facilitar el proceso.
Descubre qué es MCP (Model Context Protocol), cómo funciona y por qué se ha convertido en una herramienta esencial para construir agentes inteligentes conectados, seguros y escalables.
¿Vale la pena testear modelos en Laravel? Descubre cuándo es útil, mejores prácticas y errores comunes al hacerlo.

Made with ♥️ & 🧉 in Montevideo, Uruguay.

[AC].dev is not affiliated with Laravel or Laravel LLC. Laravel is a Trademark of Taylor Otwell.

Code highlighting provided by Torchlight.

We use cookies!

Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it.