【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); });

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