Laravel

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

Autorangel cruz
Publicado
Lectura1 min de lectura
Directiva para VUE para mostrar errores de validación con Laravel

Aquí el como usarla.

instalación

NPM:

npm i vue-has-error-laravel

Requerirlo en su archivo de componente vue.js:

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

instrucciones de uso

<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:

<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

Bio
Angel Cruz

Desarrollador web full-stack enfocado en React, buenas prácticas y código abierto. Apasionado por construir productos útiles y compartir lo aprendido en el camino.