想要使用 vuejs 显示 laravel 验证消息答案

【问题标题】：want to show laravel validation messages using vuejs想要使用 vuejs 显示 laravel 验证消息
【发布时间】：2020-01-08 00:04:54
【问题描述】：

我尝试使用 vuejs 显示 Laravel 验证错误消息。我试图使用一个对象来获取所有错误。

<div class="form-group">
  <div v-if="validationErrors">
    <ul class="alert alert-danger">
     <span style="color: #fff;">Can't save your data. List of errors here</span>
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
</button>
    <li v-for="error in validationErrors" :key="error.key">{{ error }}</li>
</ul>
</div>
</div>

它显示消息，但在数组中显示错误名称。我使用此对象收到错误消息

if (error.response.status == 422) {
      this.validationErrors = error.response.data.errors;
}

错误显示如下。

{ "name": [ "The name has already been taken." ] }

【问题讨论】：

它是因为laravel为每个字段返回一个数组中的错误，数组的原因是每个字段可以有多个消息，所以你可以做error[0]或者你可以迭代错误再次。

标签： laravel vue.js

【解决方案1】：

<li v-for="(error, index) in validationErrors" :key="`error_${index}`">{{ error[0] }}</li>

这可行，但我可能会在从响应中设置错误数组之前进行一些格式化，例如平面映射等。

【讨论】：