vue實(shí)現(xiàn)動(dòng)態(tài)給data函數(shù)中的屬性賦值
vue動(dòng)態(tài)給data函數(shù)中的屬性賦值
1.首先創(chuàng)建一個(gè)監(jiān)視器，用來(lái)監(jiān)視相關(guān)的屬性
2.當(dāng)這個(gè)相關(guān)的屬性被修改的時(shí)候，在監(jiān)視器中的handler函數(shù)中寫處理邏輯即可
vue給data中的數(shù)據(jù)賦值報(bào)錯(cuò)
TypeError: Cannot set property ‘tableData‘ of undefined
問(wèn)題背景
最近剛?cè)腴Tvue，有個(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)開始頁(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);
});
}
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue3與免費(fèi)滿血版DeepSeek實(shí)現(xiàn)無(wú)限滾動(dòng)+懶加載+瀑布流模塊及優(yōu)化過(guò)程
在進(jìn)行非完全標(biāo)準(zhǔn)化數(shù)據(jù)的可視化展示時(shí),瀑布流是一種經(jīng)常被采用的展示方法,瀑布流能夠有效地將不同大小規(guī)格的內(nèi)容以一種相對(duì)規(guī)整的方式呈現(xiàn)出來(lái),本文給大家介紹了基于Vue3與免費(fèi)滿血版DeepSeek實(shí)現(xiàn)無(wú)限滾動(dòng)+懶加載+瀑布流模塊,需要的朋友可以參考下2025-03-03
VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Vue-drag-resize 拖拽縮放插件的使用(簡(jiǎn)單示例)
本文通過(guò)代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡(jiǎn)單示例,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄類型切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問(wèn)題及解決
這篇文章主要介紹了安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
關(guān)于vue雙向綁定帶來(lái)的問(wèn)題及解決
這篇文章主要介紹了關(guān)于vue雙向綁定帶來(lái)的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue使用axios進(jìn)行數(shù)據(jù)異步交互的方法
大家都知道在Vue里面有兩種出名的插件能夠支持發(fā)起異步數(shù)據(jù)傳輸和接口交互,分別是axios和vue-resource,同時(shí)vue更新到2.0之后,宣告不再對(duì)vue-resource更新,而是推薦的axios,今天就講一下怎么引入axios,需要的朋友可以參考下2024-01-01