Vue.js-Axios技术问题：如何在POST请求体中传递多个product_ids值？

安全阿岳

2026-5-29

问题：Axios POST请求无法传递多值格式的product_ids参数

我在使用Axios发送POST请求时遇到了问题，需要在请求体的product_ids字段中传递类似8|559这样的多值格式，其余参数分别是customer_type_id=2、qty_from=11、sell_price=10001。

我的Axios代码如下：

createNewPricetiers() {
  this.loading = true
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }
  let data = {
    product_ids: this.$route.params.id || this.form.variant,
    customer_type_id: this.form.customer,
    qty_from: this.form.qty,
    sell_price: this.form.sellPrice
  }
  axios({
    method: 'POST',
    url: BASE_API + 'productpricetiers',
    headers: headers,
    data: data
  })
  // ...后续处理代码
}

但调用服务器时，仅发送了this.$route.params.id的值，无法传递8|559这样的多值，请问问题出在哪里？

回答

问题大概率出在你对product_ids的赋值逻辑上——this.$route.params.id || this.form.variant这个逻辑是取第一个“真值”，如果this.$route.params.id存在（哪怕是一个单值比如8），它就会直接跳过this.form.variant，自然传不了你需要的多值格式。

给你几个排查和修复的思路：

先确认参数的实际值：在赋值前加个日志，看看两个候选值到底是什么：
```
console.log('route参数id:', this.$route.params.id);
console.log('表单variant值:', this.form.variant);
console.log('最终传递的product_ids:', this.$route.params.id || this.form.variant);
```
这样你就能直观看到是哪个值被实际传出去了，也能确认this.form.variant是否真的存储了8|559这个目标值。
调整赋值逻辑：
- 如果是希望this.$route.params.id不存在时才用this.form.variant，那要确保this.$route.params.id确实是undefined或空字符串（因为0、false这类值也会被||判定为假值），可以改成更严谨的判断：
```
product_ids: (this.$route.params.id !== undefined && this.$route.params.id !== '') ? this.$route.params.id : this.form.variant
```
- 如果是需要合并两个值为|分隔的格式，那可以用拼接的方式：
```
product_ids: [this.$route.params.id, this.form.variant].filter(val => val !== undefined && val !== '').join('|')
```
  这个写法会自动过滤空值，把有效参数用|连接起来。
检查表单绑定：如果日志显示this.form.variant本身就不是8|559，那要排查前端表单的绑定逻辑，确认用户选择的多值是否正确同步到了this.form.variant中。

内容的提问来源于stack exchange，提问作者dede.brahma