vue實(shí)現(xiàn)動態(tài)給data函數(shù)中的屬性賦值
vue動態(tài)給data函數(shù)中的屬性賦值
1.首先創(chuàng)建一個監(jiān)視器,用來監(jiān)視相關(guān)的屬性
2.當(dāng)這個相關(guān)的屬性被修改的時候,在監(jiān)視器中的handler函數(shù)中寫處理邏輯即可
vue給data中的數(shù)據(jù)賦值報(bào)錯
TypeError: Cannot set property ‘tableData‘ of undefined
問題背景
最近剛?cè)腴Tvue,有個典型的場景,也是簡單的坑。就是需要通過axios請求數(shù)據(jù)之后,將數(shù)據(jù)賦予到data中的tableData,而table組件會根據(jù)tableData雙向綁定自動渲染。
但是當(dāng)我賦值的時候TypeError: Cannot set property 'tableData' of undefined。究竟怎么回事呢。
分析
代碼看起來,好像并沒有什么毛病。。。
export default {
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)橛昧?function 函數(shù) 的原因,在函數(shù)里面,this是指向函數(shù)本身,已經(jīng)不是外部的默認(rèn)this了
解決方案
使用一個 that 指向 外部的this ,然后調(diào)用 that.tableData ,輕松搞定。
onSearch: function(){
const that=this; //用that解決函數(shù)內(nèi)部this指向問題 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);
});
}

以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue3與免費(fèi)滿血版DeepSeek實(shí)現(xiàn)無限滾動+懶加載+瀑布流模塊及優(yōu)化過程
在進(jìn)行非完全標(biāo)準(zhǔn)化數(shù)據(jù)的可視化展示時,瀑布流是一種經(jīng)常被采用的展示方法,瀑布流能夠有效地將不同大小規(guī)格的內(nèi)容以一種相對規(guī)整的方式呈現(xiàn)出來,本文給大家介紹了基于Vue3與免費(fèi)滿血版DeepSeek實(shí)現(xiàn)無限滾動+懶加載+瀑布流模塊,需要的朋友可以參考下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,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue-drag-resize 拖拽縮放插件的使用(簡單示例)
本文通過代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡單示例,代碼簡單易懂,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
在vue中實(shí)現(xiàn)禁止屏幕滾動,禁止屏幕滑動
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止屏幕滾動,禁止屏幕滑動,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3+TS+Vite+NaiveUI搭建一個項(xiàng)目骨架實(shí)現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個項(xiàng)目骨架實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
element-ui中el-row中設(shè)置:gutter間隔不生效問題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
安裝@vue/cli報(bào)錯npmERR gyp ERR問題及解決
這篇文章主要介紹了安裝@vue/cli報(bào)錯npmERR gyp ERR問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
Vue使用axios進(jìn)行數(shù)據(jù)異步交互的方法
大家都知道在Vue里面有兩種出名的插件能夠支持發(fā)起異步數(shù)據(jù)傳輸和接口交互,分別是axios和vue-resource,同時vue更新到2.0之后,宣告不再對vue-resource更新,而是推薦的axios,今天就講一下怎么引入axios,需要的朋友可以參考下2024-01-01

