{ "countryId": "", "departId": "", "salerDeptId": "", "customerCode": "", "taskId": "TCS000000031", "taskFrm": "", "filedList": [ { "fieldId": "CAN_USE", "controlKind": "10" }, { "fieldId": "SUGGEST", "controlKind": "10" } ] } vue如何将这样的数据结构 穿给后端

在 Vue 中将这样的数据结构传给后端有几种常见的方式：

1. 使用 Axios 发送 POST 请求：
- 首先，将数据结构绑定到 Vue 组件的数据属性中。
- 在发送请求时，使用 Axios 发送一个 POST 请求到后端的相应接口。
- 将数据结构作为请求的数据体发送给后端。

示例代码：

// 在 Vue 组件中
data() {
  return {
    formData: {
      countryId: "",
      departId: "",
      salerDeptId: "",
      customerCode: "",
      taskId: "TCS000000031",
      taskFrm: "",
      filedList: [
        {
          fieldId: "CAN_USE",
          controlKind: "10"
        },
        {
          fieldId: "SUGGEST",
          controlKind: "10"
        }
      ]
    }
  };
},
methods: {
  sendDataToBackend() {
    axios.post('/api/endpoint', this.formData)
      .then(response => {
        // 处理响应
      })
      .catch(error => {
        // 处理错误
      });
  }
}

2. 使用表单提交：
- 在 Vue 组件中，将数据结构绑定到表单控件中的相应字段。
- 在表单提交时，将数据结构作为表单数据一起发送给后端。

示例代码：

<!-- 在 Vue 模板中 -->
<form @submit="sendDataToBackend">
  <input type="text" v-model="formData.countryId" name="countryId" />
  <input type="text" v-model="formData.departId" name="departId" />
  <input type="text" v-model="formData.salerDeptId" name="salerDeptId" />
  <input type="text" v-model="formData.customerCode" name="customerCode" />
  <!-- 其他字段 -->
  <div v-for="(item, index) in formData.filedList" :key="index">
    <input type="text" v-model="item.fieldId" :name="'filedList[' + index + '][fieldId]'" />
    <input type="text" v-model="item.controlKind" :name="'filedList[' + index + '][controlKind]'" />
  </div>
  <button type="submit">提交</button>
</form>

// 在 Vue 组件中
data() {
  return {
    formData: {
      countryId: "",
      departId: "",
      salerDeptId: "",
      customerCode: "",
      taskId: "TCS000000031",
      taskFrm: "",
      filedList: [
        {
          fieldId: "CAN_USE",
          controlKind: "10"
        },
        {
          fieldId: "SUGGEST",
          controlKind: "10"
        }
      ]
    }
  };
},
methods: {
  sendDataToBackend() {
    // 使用表单提交方式将数据发送给后端
  }
}

无论你选择哪种方式，后端需要相应的接口来接收和处理传递的数据。根据后端的要求，你可能需要对数据进行进一步的处理和验证。