VueJs - 如何使用 axios 设置动态参数答案

【问题标题】：VueJs - How to set dynamic params with axiosVueJs - 如何使用 axios 设置动态参数
【发布时间】：2018-07-19 07:31:30
【问题描述】：

我有这样的情况

首先我从服务器获取数据，然后响应是

{
 data: {
   id: 4,
   status: A,
   items: {
     child: [
       {
         id: 28,
         product_id: 1
       },
       {
         id: 33,
         product_id: 4
       }
     ]
   }
 },
 status: 200,
 error: 0
}

之后，我想将数组 items.child 作为 POST 中的参数发送的数据响应。这是在 POST 中设置的参数格式：

item_id : data.id
item_status: data.status
item_combo_28_0: 1|0
item_combo_33_1: 4|1

item_combo 是从响应数据中获取的动态参数

nb: item_combo_(child.id)_index : child.product_id |索引

这是我的 axios 代码

getData() {
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }
  let id = val
  axios({
    method: 'GET',
    url: BASE_API('productcombo/' + id),
    headers: headers
  })
    .then(response => {
      this.itemCombo = []
      this.dataResponse = response.data.data
      this.setItemPackage()
      this.loading = false
    })
    .catch(error => {
      this.loading = false
    })
},
setItemPackage() {
  if (this.dataResponse.items.child.length > 0) {
    this.dataResponse.items.child.map((row, idx) => {
      this.$set(row, 'item_combo_' + row.id + '_' + [idx], row.product_id + '|' + idx)
      this.itemCombo.push(row)
      console.log(this.itemCombo)
    })
  }
}

预期：如何设置 (item_combo_?) 的数组变量以在 POST 的动态参数中设置

这是我的 POST 代码

sendData() {
  this.loadingPackage = true
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }
  let data = {
    item_id: this.dataResponse.id,
    item_tatus: this.dataResponse.status,

    ======= Here my expect =========
    item_combo_27_0: 13 | 0,
    item_combo_3_1: 15 | 0
    ================================
  }
  axios({
    method: 'POST',
    url: BASE_API('openorder/additemcombo'),
    headers: headers,
    data: data
  })
    .then(response => {
      this.result = response.data
      }
      if (response.data.error) {
        this.$message({
          message: 'Error Network',
          type: 'error'
        })
      }
    })
    .catch(() => {
      this.$notify({
        message: 'Error Connections',
        type: 'warning'
      })
    })
},

【问题讨论】：

expected: How to set array variabel for (item_combo_?) to set in dynamic params of POST。你能根据那个说法给我一个例子吗？
console.log 在setItemPackage 中的结果是什么？这就是你想要的样子吗？你想什么时候提出你的 axios 发布请求？很难理解你已经完成了什么以及还需要做什么。
@rafid 我想设置这样的参数“item_combo_(child.id)_index : child.product_id | index”，这里有一个例子：“item_combo_28_0: 1|0”
@MatthiasS 这里是我的 concole.log { 数据：{ id：4，状态：A，项目：{ child：[ { id：28，product_id：1，item_combo_28_0：1|0 }，{ id: 33, product_id: 4, item_combo_33_1: 4|1 } ] } }, 状态: 200, 错误: 0 }

标签： post dynamic parameters vuejs2 axios

【解决方案1】：

我不太确定我是否理解正确，但在您的 setItemPackage 函数中，您已经拥有将 responseData 转换为变量的代码。所以你只需要在你的 sendData 函数中使用它，你可以在其中创建将通过 axios 发送的对象。

sendData() {
  this.loadingPackage = true
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }
  let data = {
    item_id: this.dataResponse.id,
    item_tatus: this.dataResponse.status,
  }
  if (this.dataResponse.items.child.length > 0) {
    this.dataResponse.items.child.map((row, idx) => {
      data['item_combo_' + row.id + '_' + idx] = row.product_id + '|' + idx);
    })
  }
  axios({
    method: 'POST',
    url: BASE_API('openorder/additemcombo'),
    headers: headers,
    data: data
  })....

【讨论】：

@dede.brahma 没问题 :) 然后请接受答案