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

【问题标题】：How to get Array data from Object inside in Vuejs如何在Vuejs中从对象内部获取数组数据
【发布时间】：2023-03-11 05:02:01
【问题描述】：

在我的项目中，我正在使用Vue.js 和Laravel。我有一个由Laravel end 验证的动态字段表单。但是当我通过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)

          })

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

如何为每个动态表单索引从这种格式中销毁它，有什么解决方案可以做某事。

【问题讨论】：

this.inputs 包含什么？
this.inputs 包含表单中的所有动态字段。

标签： javascript laravel vue.js

【解决方案1】：

这有点粗俗，但您可以对对象进行反思以获取密钥并根据需要对其进行重组，有不止一种方法可以做到这一点，但类似：

import _ from "lodash"

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

【讨论】：

【解决方案2】：

说实话，我真的很喜欢 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);

【讨论】：

【解决方案3】：

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

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>

【讨论】：