vuetify and laravel display of validation error - laravel

Question

I just wanted to fix the display of errors in the view page. It is being displayed as JSON format. How do I fix this?
Vue.component
<template>
<v-alert
dense
outlined
type="error"
>
{{ allerror }}
</v-alert>
...
...
</template>
<script>
data: () => ({
allerror: ''
}),
axios
.post('/api/section', { name, department_id })
.then(response => {
this.getSections()
this.snackbar.appear = true
this.snackbar.alert = response.data.alert
this.snackbar.icon = response.data.icon
this.$refs.form.reset()
})
.catch(error => this.allerror = error.response.data.errors)
</script>

Answer 1

there are 2 ways to go:
1 - Show specific errors on specific field by:
<v-text-field
label="Name"
v-model="name"
:error-messages="allerror.name"
></v-text-field>
2 - Show all error:
<v-alert
dense
outlined
type="error"
>
<ul>
<li v-for="(errors, field) in allerror">
{{ field }} //name of the field
//run second loop to display all errors for this field
<ul>
<li v-for="error in errors">
{{ error }}
</li>
</ul>
</li>
</ul>
</v-alert>

Answer 2

Add custom css class
.invalid-feedback {
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #e3342f;
}
Then bind invalid-feedback in the text field, if you are using laravel you can find invalid-feedback in app.css file
<v-text-field
v-model="form.email"
:rules="[rules.required, rules.emailRules]"
:class="{ 'is-invalid':
form.errors.has('email') }"
label="E-mail"
required
></v-text-field>