[Solved] Vue Axios error: TypeError: Cannot set property ‘tableData‘ of undefined

Problem background

Recently, I just started Vue, and there is a typical scene, which is also a simple pit. After requesting data through Axios, you need to give the data to tabledata in data, and the table component will automatically render according to the two-way binding of tabledata.

But when I assign a value, typeerror: cannot set property 'tabledata' of undefined. What the hell is going on.

analysis

The code looks like there’s nothing wrong with it…

export default {
  data() {
    return {
      total: 0, //Total number of default data
      searchParam:{
        limit: 10, //number of data items per page
        page: 1, //default start page
        certNumber: "",
        certLevel: "",
        certCompanyName: "",
      },
      tableData: []
    };
  },
onSearch: function(){
      axios.post('/api/certCompany/list2',JSON.stringify(this.searchParam))
      .then(function (response) {
        console.log(response);
        this.tableData=response.data.data;
        this.total=response.data.count;
      })
      .catch(function (error) {
        console.log(error);
      });
    }
};

However, the problem is this.tabledata because the functionis used, in the function, this points to the function itself, which is no longer the default this outside.

Solution:

Use a  that point  Outsite this , then call  that.tableData , easy to get.

onSearch: function(){
      const that=this; //Use that to solve the function internal this pointing problem
      axios.post('/api/certCompany/list2',JSON.stringify(this.searchParam))
      .then(function (response) {
        console.log(response);
        that.tableData=response.data.data;
        that.total=response.data.count;
      })
      .catch(function (error) {
        console.log(error);
      });
    }

Similar Posts: