如何在 Vue.js 中显示错误数组？使用 Laravel 进行后端验证

Posted 2023-02-16

【中文标题】如何在 Vue.js 中显示错误数组？使用 Laravel 进行后端验证

【英文标题】：How to show Array of errors in Vue.js ? Backend Validation with Laravel

【发布时间】：2021-06-23 03:45:18

【问题描述】：

我有一些复杂的数据，我想在 vue 文件中显示验证错误数组数据，但我不能这样做，因为我有一些数据具有索引并显示为 contacts.0.name: [".. .."]。

请分享您的意见，我如何显示错误。

vue 文件

<template>
  <div>
    <form enctype="multipart/form-data" @submit.prevent="handleSubmit">
      <div v-for="(contact, index) in contacts" :key="index" class="row">
        <div class="col col-md-3">
          <div class="form-group mb-4">
            <label for="personName">Contact Person Name</label>
            <input
              id="personName"
              v-model="contact.name"
              type="text"
              class="form-control"
            />
            <small> Want to show here the error ? </small
            >
          </div>
        </div>

        <!-- Add or Remove button -->

        <div class="col col-md-12 text-right">
          <div class="row ml-4">
            <div v-show="index == contacts.length - 1">
              <button
                class="btn btn-warning mb-2 mr-2 btn-rounded"
                @click.prevent="add"
              >
                Add More
              </button>
            </div>
            <div v-show="index || (!index && contacts.length > 1)">
              <button
                class="btn btn-danger mb-2 mr-2 btn-rounded"
                @click.prevent="remove"
              >
                Remove
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default 
  data() 
    return 
      contacts: [
        
          name: "",
        ,
      ],

      errors: [],
    ;
  ,
  methods: 
    handleSubmit() 
      let data = new FormData();
      data.append("contacts", JSON.stringify(this.contacts));

      Request.POST_REQ(data, "/add-institute")
        .then(() => 
          alert("success");
        )
        .catch((err) => 
          this.errors = err.response.data.errors;
        );
    ,
    add() 
      this.contacts.push(
        name: "",
        email: "",
        phone: "",
        alternate_phone: "",
      );
    ,
    remove(index) 
      this.contacts.splice(index, 1);
    ,
  ,
;
</script>

控制器文件

public function add_institute(Request $request) 
  $request['contacts'] = json_decode($request['contacts'], true);
  $request->validate([
      'contacts.*.name'=> 'unique:institute_contact_people|distinct',
  ]);

  ...rest of code of insert 

  return response()->json("Success...");

获取错误响应数据

errors: 
  contacts.0.name: ["The contacts.0.name has already been taken.", "The contacts.0.name field has a duplicate value."]
  0: "The contacts.0.name has already been taken."
  contacts.1.name: ["The contacts.1.name has already been taken.", "The contacts.1.name field has a duplicate value."]
  0: "The contacts.1.name has already been taken."

【问题讨论】：

这似乎是可行的，但该死的，你能把错误对象改成更友好和有效的 JSON 吗？要么只有一个带有索引的数组，要么只有一个带有 contact > [id] > errorName 的嵌套对象？你会更容易处理。

另外，这个问题是针对laravel、laravel-5还是laravel-7？如果它适合所有 3 个，请保留 laravel。

prntscr.com/10w1289

如果有帮助，请接受我的回答。 :)

嗨，@kissu 我很欣赏你的回答，但我没有解决我已经完成了不同的代码。但是，如果您确定您的代码可以解决其他问题，那么我会投票给它，没问题

【参考方案1】：

好的，所以您的错误数据基本上是一个包含错误数组的对象。 差不多就是这样

errors: 
  'contacts.0.name': [
    'The contacts.0.name has already been taken.',
    'The contacts.0.name field has a duplicate value.',
  ],
  'contacts.1.name': [
    'The contacts.1.name has already been taken.',
    'The contacts.1.name field has a duplicate value.',
  ],
,

对我来说，如果你能实现这样的错误响应（其中包含错误数组的对象数组）会更好

betterErrors: [
  
    location: 'contact.0.name',
    errors: [
      'The contacts.0.name has already been taken.',
      'The contacts.0.name field has a duplicate value.',
    ],
  ,
  
    location: 'contact.1.name',
    errors: [
      'The contacts.1.name has already been taken.',
      'The contacts.1.name field has a duplicate value.',
    ],
  ,
],

对我来说，就目前而言，感觉不对，但你可以用这样的方式来显示你的错误

<template>
  <div>
    <div v-for="(error, key) in errors" :key="key">
      <hr />
      <span v-for="(errorItem, innerKey) in error" :key="innerKey" style="margin-top: 2rem">
         errorItem 
      </span>
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      errors: 
        'contacts.0.name': [
          'The contacts.0.name has already been taken.',
          'The contacts.0.name field has a duplicate value.',
        ],
        'contacts.1.name': [
          'The contacts.1.name has already been taken.',
          'The contacts.1.name field has a duplicate value.',
        ],
      ,
    
  ,

</script>

PS：有一个带有数组循环索引的:key 真的很糟糕。这就是为什么我建议您在错误响应中使用 location 字段。

【讨论】：

感谢您的回复，很高兴您回复我。我可以理解看到答案，但是我如何实现你建议的 JSON 格式，因为 Laravel 验证给了我错误。请检查下面的截图prntscr.com/10w1w10

最后，我已经解决了遵循面向对象形式laracasts.com/series/learn-vue-2-step-by-step/episodes/19感谢社区的问题