vuetify 和 laravel 显示验证错误

Question

我只是想修复视图页面中的错误显示。它显示为 JSON 格式。我该如何解决？

Vue.组件

<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

有两种方法可以走：

1 - 通过以下方式显示特定字段上的特定错误：

<v-text-field
    label="Name"
    v-model="name"
    :error-messages="allerror.name"
></v-text-field>

2 - 显示所有错误：

 <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>