Vue中将API响应数据赋值给本地数组后task_id属性丢失问题

算力阿峰

2026-9-29

问题排查与解决方法

核心可能原因及验证步骤

排查点1：全局/混入的响应拦截器自动转换字段命名
检查axios全局配置，或者你引入的AxiosHandler混入中，是否配置了蛇形命名自动转驼峰的逻辑（比如配置了transformResponse、引入了humps之类的转换工具）。如果开启了自动转换，接口返回的task_id会被转为taskId，自然读取task_id就返回undefined。
验证方式：在赋值语句后加一行打印，输出对象所有键名确认：
```
.then(response => {
  console.log('返回对象键名：', Object.keys(response.data[0]))
  this.deliveryJobs = response.data
})
```
排查点2：异步请求时序问题
axios请求是异步执行的，你如果在调用getDeliveryJobs()之后同步读取deliveryJobs，此时请求还未返回，deliveryJobs还是初始空数组，访问不存在的数组成员的属性自然为undefined。
验证方式：在then回调的赋值操作之后直接打印验证值：
```
.then(response => {
  this.deliveryJobs = response.data
  // 确认赋值后的值
  console.log('赋值后读取到的task_id：', this.deliveryJobs[0]?.task_id)
})
```
排查点3：控制台打印引用传递干扰
浏览器控制台打印对象是引用类型，你看到的打印内容是你展开对象时的最新值，不是打印那一刻的值。可以转成字符串打印确认接口返回的原始值：
```
.then(response => {
  // 打印原始字符串值，排除引用干扰
  console.log('接口返回原始内容：', JSON.stringify(response.data, null, 2))
  this.deliveryJobs = response.data
})
```
临时解决方法
如果是字段自动转换导致的，可以直接读取转换后的驼峰字段taskId，或者临时深拷贝赋值规避响应式代理可能的干扰：
```
this.deliveryJobs = JSON.parse(JSON.stringify(response.data))
```