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
Publicado @
May 28, 2020
Directiva para VUE para mostrar errores de validación con Laravel
Acá el como usarla.
instalación
NPM:
Copied!
1npm i vue-has-error-laravel
Requerirlo en su archivo de componente vue.js:
Copied!
1import VueHasErrorLaravel from 'vue-has-error-laravel'2 3Vue.use(VueHasErrorLaravel)
instrucciones de uso
Copied!
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:
Copied!
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