Cannot set property 'tableData' of undefined

Element UI 的组件 Table 表格数据绑定数据 tableData：

<el-table :data="tableData" border class="data_table">
    <el-table-column prop="desc" label="描述" width="200">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="200">
    </el-table-column>
    <el-table-column prop="pkid" label="pkid" width="200">
    </el-table-column>
    <el-table-column prop="resourceIds" label="资源">
    </el-table-column>
  </el-table>

axios获取数据：

    data () {
      return {
        tableData: []
      }
    }
    this.$axios.get("role/getAll")
      .then(function(response) {
        if(response.data.sucess){
          console.log(response.data.data);
          this.tableData = [];
          this.tableData = response.data.data;
        }
      })
      .catch(function(error) {
        console.log(error.message);
        alert(error.message);
      })

tableData 已经定义过了，还是，报错如下：

原因：

this问题，函数不是=>箭头函数，获取到的this不是vue实例。

解决办法：

        this.$axios.get("role/getAll")
          .then(response => {
            if(response.data.sucess){
              console.log(response.data.data);
              this.tableData = [];
              this.tableData = response.data.data;
            }
          })
          .catch(error => {
            console.log(error.message);
            alert(error.message);
          })