第vue實(shí)現(xiàn)動(dòng)態(tài)給data函數(shù)中的屬性賦值目錄vue動(dòng)態(tài)給data函數(shù)中的屬性賦值vue給data中的數(shù)據(jù)賦值報(bào)錯(cuò)問題背景分析解決方案

vue動(dòng)態(tài)給data函數(shù)中的屬性賦值

1.首先創(chuàng)建一個(gè)監(jiān)視器，用來監(jiān)視相關(guān)的屬性

2.當(dāng)這個(gè)相關(guān)的屬性被修改的時(shí)候，在監(jiān)視器中的handler函數(shù)中寫處理邏輯即可

vue給data中的數(shù)據(jù)賦值報(bào)錯(cuò)

TypeError:CannotsetpropertytableDataofundefined

問題背景

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

但是當(dāng)我賦值的時(shí)候TypeError:CannotsetpropertytableDataofundefined。究竟怎么回事呢。

分析

代碼看起來，好像并沒有什么毛病。。。

exportdefault{

data(){

return{

total:0,//默認(rèn)數(shù)據(jù)總數(shù)

searchParam:{

limit:10,//每頁的數(shù)據(jù)條數(shù)

page:1,//默認(rèn)開始頁面

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

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

解決方案

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

onSearch:function(){

constthat=this;//用that解決函數(shù)內(nèi)部this指向問題

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(