Level 54
@vusumzi can you just collect errors as props?
<grade-component :grades='@json($grades)' :errors='{{$errors}}'></grade-component>
1 like
Nov 6, 2020
6
Level 1
How to directly echo blade error messages into vue component
Hello... I have this vue component inside a blade form and I want to handle laravel validation errors in this vue component... How do I directly pass/echo and catch the errors from the controller to the vue and display them underneath the input fields
<template>
<div class="row my-2">
<div class="col-md-2 font-weight-bold pt-2">Grade:</div>
<div class="col-md-10">
<select name="grade" class="form-control" v-model="selected_grade" @change="onChange($event)">
<option value="0" disabled>Choose a grade</option>
<option v-for="grade in grading" :key="grade.id" :value="grade.id">{{grade.name}}</option>
</select>
<div class="row my-3" v-if="subjects !== null">
<div class="col-md-5">
<div class="card shadow">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold">Subjects:</h6>
</div>
<div class="card-body">
<div class="custom-control custom-checkbox mb-2" v-for="subject in subjects" :key="subject.id">
<input type="checkbox" class="custom-control-input @error('subjects') is-invalid @enderror" name="subjects[]" :id="subject.id" :value="subject.id"/>
<label class="custom-control-label" :for="subject.id">{{subject.name}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['grades'],
data: function() {
return {
grading: this.grades,
selected_grade: 0,
subjects: null,
}
},
methods: {
onChange(event) {
this.grading.forEach((obj, index) => {
if (obj.id == event.target.value){
this.subjects = obj.subjects;
}
})
}
}
}
</script>
create.blade.php: inside this form there is a vue component that I want to validate its input elements like the form elements
<form method="POST" action="{{ route('admin.store') }}">
@csrf
<div class="row my-2">
<div class="col-md-2 font-weight-bold pt-2">Surname:</div>
<div class="col-md-10">
<input type="text" id="last_name" name="last_name" class="form-control @error('last_name') is-invalid @enderror" value="{{ old('last_name') }}">
@error('last_name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div
.
.
.
.
<grade-component :grades='@json($grades)' ></grade-component>
.
.
.
.
</form>
Level 1
Thank you...
But How do you handle them inside the vue component? I know you can't handle them as in Blade like:
@error('last_name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
what is the correct way of displaying them?
Level 54
@vusumzi use a v-if
<span class="invalid-feedback" role="alert" v-if='errors && errors.last_name'>
<strong>{{ errors.last_name }}</strong>
</span>
1 like
Level 10
To pass your data from blade to vue you can do this:
<component-name mydata="{{ $data }}"></component-name>
Remember, {{ $data }} comes from your controller (when you pass your data to the view, attach the $data)
Now to catch this on the other side with vue(inside your component ) you need to to this:
export default {
props: ['mydata'],
data() {
return {
}
}
You can then access 'mydata' as {{mydata}} anywhere in your vue template.
Hope this helps,
1 like
Level 54
@boubou thats good. just like what I said:
can you just collect errors as props?
1 like
Level 1
Thank you Guys...
Please or to participate in this conversation.