Directiva para VUE para mostrar errores de validación con Laravel
Este artículo tiene más de un año de antigüedad, el contenido pudiera estar obsoleto.
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
Autor
Angel Cruz