Vue.js中无法向data内数组属性options推送元素的问题排查

出现空数组基本是以下三个原因之一：

• 回调函数this指向丢失：如果接口请求的回调用了普通function(){}写法，回调内部的this不是Vue组件实例，你执行push操作修改的根本不是data里声明的options，组件内的options自然一直是空值。
• 打印时机不对：接口请求是异步逻辑，如果把console.log(this.options)写在了请求回调的外部，这行代码会在接口响应返回前执行，此时还没执行push逻辑，打印出来必然是空数组。
• 响应层级取错：部分HTTP请求库会对接口返回做一层封装，如果你取的response.data不是Laravel实际返回的反序列化数组，循环根本不会执行。

1. 首先保证请求回调绑定正确的组件实例上下文，以axios为例，推荐用async/await写法彻底规避this指向问题：

// 接口请求逻辑写在组件methods配置里
async getFieldOptions() {
  // 先重置options，避免多次请求时选项重复叠加，先放入默认占位项
  this.options = [
    { value: null, text: 'Please select some item' }
  ]
  try {
    const response = await axios.get('/your-import-api-address')
    // 先校验返回值是不是数组，避免非数组类型调用forEach报错
    const fieldList = Array.isArray(response.data) ? response.data : []
    // 遍历生成下拉选项
    fieldList.forEach((item, index) => {
      this.options.push({
        value: item,
        text: item, // 之前写的index是数字序号，下拉显示文本建议直接用接口返回的字段名，需要序号可改回index
        // 若需要禁用指定项，加对应判断即可，比如禁用最后一项：
        // disabled: index === fieldList.length - 1
      })
    })
    // 要查看最终的options，必须写在回调内部、循环执行完成的位置
    console.log('处理完成的options：', this.options)
  } catch (err) {
    console.error('接口请求失败', err)
  }
}

2. 在mounted生命周期或者对应触发时机（比如导入文件完成后）调用这个获取选项的方法即可。

如果按上述写法还是有问题，在forEach循环内部加一行console.log(this, item)：

• 如果打印出来的this不是当前Vue组件实例，说明上下文绑定错误，换成箭头函数或者async/await写法即可
• 如果循环根本没触发，说明你取的response.data不是目标数组，逐层打印response结构找对实际返回的数组字段即可

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