这个问题搞了一整天。
是这么一个功能:
<!-- vue的template中定义了一个table,使用数据tableData -->
<el-table :data="tableData" border style="width: 100%" class="main-table">
// 在data中定义了tableData
tableData: [
{
"id":"1",
"name":"测试数据",
"status":"执行中"
},
{
"id":"2",
"name":"测试数据2",
"status":"执行中"
}
]
// 需要上服务器查询数据,但查询后结果没有刷新,打印this.tableData,发现查询后回调的tableData根本就不是定义那个
listTask(){
console.log(this.tableData);
queryTask(function(data){
console.log(this.tableData);
})
}
// 第一个log打印出定义的tableData的值,但第二个log打印出来是undefine
// 肯定是this不是一个东西了。
// 因为queryTask是vue外JS的方法,所以导致了这个不同。
// 改成这样就可以了:
listTask(){
console.log(this.tableData);
queryTask((data)=>{
console.log(this.tableData);
})
}
// function和=>的区别是:
// function中this是使用时的对象
// =>中的this是定义时的对象