Vuesax表格无法加载Axios获取的数据，求排查原因

使用Vuesax创建表格后，尝试通过Axios接口获取数据填充，但表格无法正常显示数据。相关代码片段如下：

methods: {
  datas() {
    var vm = this;
    axios
      .get(`http://115.145.177.104:1807/machinerepairhistory`, [
        {
          company: "",
          factory: "",
          repairno: "",
          model_group: "",
          repairdate: "",
          repairtime: "",
          repaircomp: "",
          repairissue: "",
          sparepart: "",
          repairstory: "",
          repairamt: "",
          repairuserid: "",
          repairusernm: "",
          remark: "",
          createdate: "",
          createid: "",
          updatedate: "",
          updateid: "",
        },
      ])
      .then((response) => {
        console.log("response.data : " + JSON.stringify(response.data));
        vm.datas = response.data;
      })
      .catch((error) => {
        console.error(error);
      });
    axios;
  }
}

疑问：数据无法正常显示的原因是什么？是否是datas的数据赋值出现了问题？

核心问题1：方法与数据属性重名 #

你把请求数据的方法命名为datas，同时又在回调里给vm.datas赋值——这直接导致实例上的datas被方法覆盖了。Vue会把data里的属性和methods里的方法都挂载到实例上，重名时方法优先级更高，表格绑定的datas其实是这个函数，不是接口返回的数组，肯定渲染不了。

核心问题2：Axios请求参数格式错误 #

Axios的get方法第二个参数是配置对象，不是你传的参数数组。你现在传的对象数组会被当成请求配置处理，大概率导致请求异常，拿不到正确数据。如果要传查询参数，应该放在params字段里：

axios.get('http://115.145.177.104:1807/machinerepairhistory', {
  params: {
    // 这里放你的查询参数，比如 company: 'xxx'
  }
})

其他问题 #

• 你只定义了datas方法，但没触发它——比如没在created或mounted钩子中调用，接口根本没发起，自然没数据；
• 最后一行的axios;是无效代码，直接删掉就行。

修复步骤 #

1. 重命名请求方法，比如改成fetchRepairData，避免和data里的datas属性重名；
2. 在组件的data中声明datas: []，作为表格的数据源；
3. 修正Axios请求的参数格式；
4. 在created钩子中调用请求方法：

created() {
  this.fetchRepairData()
}

这样调整后，数据应该就能正常渲染到Vuesax表格里了。

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