最近剛?cè)腴T(mén)vue，有個(gè)典型的場(chǎng)景，也是簡(jiǎn)單的坑。就是需要通過(guò)axios請(qǐng)求數(shù)據(jù)之后，將數(shù)據(jù)賦予到data中的tableData，而table組件會(huì)根據(jù)tableData雙向綁定自動(dòng)渲染。

但是當(dāng)我賦值的時(shí)候TypeError: Cannot set property 'tableData' of undefined。究竟怎么回事呢。

分析

代碼看起來(lái)，好像并沒(méi)有什么毛病。。。

export default {
  data() {
    return {
      total: 0, //默認(rèn)數(shù)據(jù)總數(shù)
      searchParam:{
        limit: 10, //每頁(yè)的數(shù)據(jù)條數(shù)
        page: 1, //默認(rèn)開(kāi)始頁(yè)面
        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);
      });
    }
};

然而問(wèn)題是出來(lái)了this.tableData因?yàn)橛昧?function 函數(shù) 的原因，在函數(shù)里面，this是指向函數(shù)本身，已經(jīng)不是外部的默認(rèn)this了

解決方案

使用一個(gè) that 指向外部的this ，然后調(diào)用 that.tableData ，輕松搞定。

onSearch: function(){
      const that=this; //用that解決函數(shù)內(nèi)部this指向問(wèn)題 zhengkai.blog.csdn.net
      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);
      });
    }