Vue.js动态IBAN及授权人表单POST提交字段为空如何处理

问题原因 #

你发起请求时仅提交了this.data对象，而动态IBAN数据存储在sections数组、动态授权人数据存储在yetkisection数组中，这两部分数据没有被加入到提交参数中，因此后端收到的动态字段值为空。

修复方案 #

修改提交方法，在发起请求前将动态字段的数据按要求格式整合到请求参数中，同时补全新增授权人时的字段初始化，避免响应式异常：

修改后的JS代码 #

new Vue({
  el: "#app",
  data() {
    return {
      data: {
        name: ""
      },
      sections: [{
        ibans: [{
          item: ""
        }]
      }],
      yetkisection: [{
        yetkililer: [{
          yetkiliadi: "",
          yetkilieposta: "",
          yetkilitelefon: "",
          yetkilinotu: "",
        }]
      }],
    }
  },
  methods: {
    addNewItem(id) {
      this.sections[id].ibans.push({
        item: ''
      });
    },
    removeItem(sectionIndex, ibanIndex) {
      this.sections[sectionIndex].ibans.splice(ibanIndex, 1);
    },
    addNewYetkili(id) {
      // 补全所有字段初始化，保证响应式正常
      this.yetkisection[id].yetkililer.push({
        yetkiliadi: "",
        yetkilieposta: "",
        yetkilitelefon: "",
        yetkilinotu: "",
      });
    },
    removeYetkili(sectionIndex, ibanIndex) {
      this.yetkisection[sectionIndex].yetkililer.splice(ibanIndex, 1);
    },
    async addTag() {
      // 提取所有IBAN值组成数组
      const ibanList = this.sections.flatMap(section => section.ibans.map(iban => iban.item))
      // 提取所有授权人数据组成数组
      const authorizedList = this.yetkisection.flatMap(section => section.yetkililer)
      // 合并成符合要求的请求参数
      const postData = {
        ...this.data,
        iban: ibanList,
        authorized: authorizedList
      }
      const res = await this.callApi('post', 'app/create_musteri', postData)
      if (res.status === 200) {
        console.log(res)
      } else {
        console.log("error");
      }
    }
  },
})

提交格式说明 #

最终提交的JSON结构如下，符合要求的iban、authorized字段格式：

{
  "name": "填写的用户名",
  "iban": ["IBAN1", "IBAN2", "..."],
  "authorized": [
    {
      "yetkiliadi": "授权人姓名1",
      "yetkilieposta": "授权人邮箱1",
      "yetkilitelefon": "授权人电话1",
      "yetkilinotu": "授权人备注1"
    },
    {
      "yetkiliadi": "授权人姓名2",
      "yetkilieposta": "授权人邮箱2",
      "yetkilitelefon": "授权人电话2",
      "yetkilinotu": "授权人备注2"
    }
  ]
}

如果后端要求iban字段是逗号分隔的字符串而不是数组，只需要把iban: ibanList改成iban: ibanList.join(',')即可。

内容的提问来源于stack exchange，提问作者Selaminko Elam