Question

在我的项目中，我正在使用Vue.js和Laravel。我有一个动态字段表单，该表单在Laravel端得到了验证。但是当我通过axios收到验证消息时，我无法将其与响应分开。

这是我的Laravel代码。

      $this->validate($request,[
            'requested_by' => 'required',
            'requested_date' => 'required',
            'issued_by' => 'required',
            'supplier' => 'required',
            'data.*.product' => 'required',
            'data.*.quantity' => 'required',
            'data.*.unit' => 'required',
            'data.*.unit_price' => 'required',
        ]);

axios请求的Vue代码-

  axios.post('/api/requisition',{
              'data' : this.inputs,
              'requested_by': this.form.request_by,
              'requested_date': this.form.request_date,
              'issued_by': this.form.issue_by,
              'supplier': this.form.supplier,})
          .then(response => {
              console.log(response)
          })
          .catch(err => {
              this.allerrors =  err.response.data.errors
              console.log(this.allerrors)

          })

在我的回应中，我得到了类似输出的图像：

如何为每个动态表单索引从这种格式中破坏它，是否有解决方案来做些什么？

Answer 1

我真的很喜欢lodash的回答。但是，这样做很有趣。这是一个没有lodash的示例。

const res = {
  "data.0.name": "Bob",
  "data.0.gender": "Male",
  "data.0.age": 27,
  "data.1.name": "Kelly",
  "data.1.gender": "Female",
  "data.1.age": 24,
  "issuedBy: "Morty",
  "requestedBy": "Rick"
};

const output = [];

Object.keys(res)
  .filter(key => /data/.test(key))
  .forEach(key => {
    const [index, prop] = key.replace('data.', '').split('.');
    if (!output[index]) {
      output[index] = {};
    }
    output[index][prop] = res[key]
  });

console.log(output);

Answer 2

我以这种方式解决了我的问题。

axios.post('/api/requisition',{
              'data' : this.inputs,
              'requested_by': this.form.request_by,
              'requested_date': this.form.request_date,
              'issued_by': this.form.issue_by,
              'supplier': this.form.supplier,})
          .then(response => {
              console.log(response)
          })
          .catch(err => {
              this.allerrors =  err.response.data.errors
              console.log(this.allerrors["data.[0].product"])
          })

在动态表单视图中以这种方式处理-

 <div :class="['form-group',allerrors['data.'+key+'.product'] ? 'has-error error' : '']">
       <label for="">Product<i class="text text-danger">*</i></label>
         <select class="form-control" v-model="input.product" @change="getData($event,k)">
            <option value="" disabled selected>-Select Product-</option>

       </select>

     </div>

 <span v-if="allerrors['data.'+key+'.product']" :class="['text text-danger']">{{allerrors["data."+key+".product"]}}</span>  

 </div>

Answer 3

虽然有点毛骨悚然，但您可以根据自己的想法来思考该对象以获取键并对其进行重组，这样做的方法不只一种，而且类似：

import _ from "lodash"

function transformData(data) {
  return Object.entries(data).reduce((obj, [k,v]) => _.set(obj, k, v), {})
}

如何在Vuejs中从对象内部获取数组数据

3 个答案: