【vue】vue给data定义的变量赋值时候报错Cannot set property ‘tableData‘ of undefined解决方案

前言

vue中通过axios调用webapi获取数据后，把数据绑定到element table时候，报错：Cannot set property 'tableData' of undefined，解决方案如下

报错信息 

此处代码报错：this.tableData = res.data;

报错原因：是因为在函数（function）中如果使用this，那么此this指向函数本身，所以在外部定义的变量（tableData ）是无法获取到的

<script>
const restweburl = "http://localhost:5000/";
export default {
  created() {
    this.axios
      .get(restweburl + "api/Article/GetAllArticles", {
        // 如果需要传参可以通过如下方式，也可以直接把参数拼接在url后边
        //params: {
        //title: "",
        //},
      })
      .then(function (res) {
        //此处代码报错
        this.tableData = res.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  data() {
    return {
      tableData: [],
    };
  },
};
</script>

解决方案

第一种方案：定义一个that指向外部的this，然后使用that. tableData

const that=this; //用that解决函数内部this指向问题

 that.tableData = res.data;

修改后的代码

 const that=this; //用that解决函数内部this指向问题
    this.axios
      .get(restweburl + "api/Article/GetAllArticles", {
        // 如果需要传参可以通过如下方式，也可以直接把参数拼接在url后边
        //params: {
        //title: "",
        //},
      })
      .then(function (res) {
        that.tableData = res.data;
      })
      .catch(function (error) {
        console.log(error);
      });

第二种方案：把函数function改为箭头函数=>

 .then(res=> {
        this.tableData = res.data;
      })

修改后的代码如下

    this.axios
      .get(restweburl + "api/Article/GetAllArticles", {
        // 如果需要传参可以通过如下方式，也可以直接把参数拼接在url后边
        //params: {
        //title: "",
        //},
      })
      .then(res=> {
        this.tableData = res.data;
      })
      .catch(function (error) {
        console.log(error);
      });

修改后运行项目可以正常获取和绑定数据，完美解决