28 DE mayo DE 2020
Directiva para VUE para mostrar errores de validación con Laravel
Acá el como usarla.
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)
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>
Leonardo Manuel Alvarez
MIT
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.