vue 數(shù)據(jù)(data)賦值問題的解決方案
總結一下我遇到的一個糾結很久的問題。
在項目中需要用到后臺的數(shù)據(jù)對前端渲染,使用到了vue整合的axios,使用vue中的鉤子函數(shù)在頁面組件掛載完成之后向后臺發(fā)送一個get請求然后將返回后的數(shù)據(jù)賦值data()中定義的屬性:


在請求執(zhí)行成功后執(zhí)行回調函數(shù)中的內容,回調函數(shù)處于其它函數(shù)的內部this不會與任何對象綁定,為undefined。
解決方案:一)將指向vue對象的this賦值給外部方法定義的屬性,然后在內部方法中使用該屬性

二)使用箭頭函數(shù)

補充:解決 vue data中數(shù)據(jù)之間的調用undefined問題
解決辦法:沒法解決,根本不能這樣調用。
雖然data函數(shù)中的this是指向VueComponent的,(配合理解:data中的數(shù)據(jù)是可以用this調用props中的數(shù)據(jù)的)但是在data中調用另一個屬性的時候,data中的數(shù)據(jù)還沒有解析出來,因為return {}對象的時候它們中的所有數(shù)據(jù)是一起渲染解析的,所以會出現(xiàn)undefined問題。
(以上僅個人理解,如有錯誤,還請評論指正)
所以選擇在mounted生命周期中完成賦值操作
export default { data(){ return { firstName:’111’, lastName:’222’, fullName:’’ } }, mounted(){ this.fullName = this.firstName +’’+this.lastName; } }
顯示結果:

當然如果fullName不需要在data中定義的話,在computed計算屬性中定義可能會優(yōu)雅。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。如有錯誤或未考慮完全的地方,望不吝賜教。
相關文章:
1. Spring Boot和Thymeleaf整合結合JPA實現(xiàn)分頁效果(實例代碼)2. 解決Android studio xml界面無法預覽問題3. 圖文詳解vue中proto文件的函數(shù)調用4. 詳解Android studio 動態(tài)fragment的用法5. 什么是python的自省6. php模擬實現(xiàn)斗地主發(fā)牌7. vue 使用localstorage實現(xiàn)面包屑的操作8. .Net Core使用Coravel實現(xiàn)任務調度的完整步驟9. Vuex localStorage的具體使用10. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現(xiàn)

網(wǎng)公網(wǎng)安備