---
title: "Directiva para VUE para mostrar errores de validación con Laravel"
excerpt: "Directiva para VUE para mostrar errores de validación con Laravel"
date: "2020-05-28T16:58:30.000Z"
category: "Laravel"
seo_title: "Directiva Vue para mostrar errores de validación de Laravel"
seo_description: "Muestra errores de validación de Laravel en Vue con la directiva v-has-error del paquete vue-has-error-laravel. Instalación con npm e integración en formularios con Axios en minutos."
author:
  name: "angel cruz"
  picture: "https://angelcruzdevcdn.nyc3.cdn.digitaloceanspaces.com/images/me/angel-cruz.png"
ogImage:
  url: "/images/open-graph/laravel-opengraph-image.png"
---

Aquí el como usarla. 

### instalación

NPM:
```bash
npm i vue-has-error-laravel
```
Requerirlo en su archivo de componente vue.js:

```javascript
import VueHasErrorLaravel from 'vue-has-error-laravel'

Vue.use(VueHasErrorLaravel)
```

### instrucciones de uso

```javascript
<template>
<form method="post" @submit.prevent="updateProfile" enctype="multipart/form-data">
   <div class="row">
      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
          <div class="form-group">
              <label>Apellidos</label>
              <input type="text" name="lastname" v-has-error="errors.lastname" v-model="user.lastname"  class="form-control" >
            </div>
      </div>
      <div class="col-12 col-sm-12 col-md-12 col-lg-12">
           <div class="mt-2">
               <button type="submit" class="btn btn-primary" :disabled="buttonDisable">{{buttonText}}</button>
           </div>
        </div>
     </div>
 </form>
</template>

<script>
export default {
    data(){
        return{
            buttonText:'Guardar cambios',
            buttonDisable:false,
            user: {
                lastname: ''
            },
            errors:[],
        }
    },
    methods:{
        updateProfile(event){
            this.buttonDisable=true;
            this.buttonText = 'Guardando cambios...';
            const formData = new FormData(event.target)
            axios.post(`${this.apiwebUrl}user/data/update`, formData)
            .then((resp)=> {
                this.errors = []
                this.buttonDisable=false;
                this.buttonText = 'Guardar cambios';
            })
            .catch((error)=> {
                if (error.response.status == 422) {
                    this.errors = error.response.data.errors;
                }
                this.buttonDisable=false;
                this.buttonText = 'Guardar cambios';
            });
        }
    }
}
</script>

```

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

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

### Autor

Leonardo Manuel Alvarez

### license

MIT

[Fuente](https://github.com/alvarez25leo/vue-has-error-laravel)

---

## Sitemap

Índice completo del sitio: [/sitemap.md](https://angelcruz.dev/sitemap.md)

Canónico HTML: [https://angelcruz.dev/post/directiva-para-vue-para-mostrar-errores-de-validacion-con-laravel](https://angelcruz.dev/post/directiva-para-vue-para-mostrar-errores-de-validacion-con-laravel)