VueJS 和 laravel 验证数组答案

【问题标题】：VueJS and laravel validation arrayVueJS 和 laravel 验证数组
【发布时间】：2017-09-25 00:49:58
【问题描述】：

从 Laravel 到 VueJS 的验证。

我需要在正确的输入字段中显示正确的错误消息。有人有想法吗？

form.vue：

<tr v-for="(item, index) in form.items">
 <td>
 <input type="text" v-model="item.name" class="form-control">
  <small class="text-danger" v-if="errors.name">
  {{errors.name[0]}}</small>
  </td>
   <input type="text" v-model="item.age" class="form-control">
  <small class="text-danger" v-if="errors.age">
  {{errors.age[0]}}</small>
  </td>
  </tr>

控制器：

$this->validate($request, [
        'items.*.name' => 'required',
        'items.*.age' => 'required',
    ]);

我在我的 vue 开发工具中得到了这个

【问题讨论】：

有什么问题？
没有出现错误
似乎错误是数组而不是名称。 {{errors[0]}} 从输出的错误转储开始并分析实际结构或阅读官方文档？

标签： laravel validation vue.js laravel-5.4

【解决方案1】：

看起来您必须遍历您的错误对象。在错误中，您的键是“items.0.name”，因此您可能必须使用 {{ errors['items.0.name'] }}。但我认为你必须改变你的 laravel 错误验证。

【讨论】：

【解决方案2】：

我使用甜蜜警报显示我的错误消息。我首先在我的 axios 帖子上发现了它。

     createAdminstrator(name, username, password, confirmpassword, superadmin) {
        const t = this;

        axios.post('/administrators', {name: name, username: username, password: password, confirmpassword: confirmpassword, superadmin: superadmin})
            .then(({data}) => {
                t.administrators.unshift(data);
                t.error = '';
            })
            .catch(error => {
                if (error.response.data.errors.username) {
                  swal(error.response.data.errors.username[0], "Error", "error");
                } else if (error.response.data.errors.confirmpassword) {
                  swal(error.response.data.errors.confirmpassword[0], "Error", "error");
                } else if (error.response.data.errors.password) {
                  swal(error.response.data.errors.password[0], "Error", "error");
                }
              });
    }

【讨论】：