vuetify and laravel display of validation error

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>