vue 數(shù)據(jù)(data)賦值問題的解決方案
總結(jié)一下我遇到的一個糾結(jié)很久的問題。
在項目中需要用到后臺的數(shù)據(jù)對前端渲染，使用到了vue整合的axios，使用vue中的鉤子函數(shù)在頁面組件掛載完成之后向后臺發(fā)送一個get請求然后將返回后的數(shù)據(jù)賦值data（）中定義的屬性：
執(zhí)行后前端報錯：
原因：
在請求執(zhí)行成功后執(zhí)行回調(diào)函數(shù)中的內(nèi)容，回調(diào)函數(shù)處于其它函數(shù)的內(nèi)部this不會與任何對象綁定，為undefined。
解決方案：
一）將指向vue對象的this賦值給外部方法定義的屬性，然后在內(nèi)部方法中使用該屬性
二）使用箭頭函數(shù)
補充：解決 vue data中數(shù)據(jù)之間的調(diào)用undefined問題
解決辦法：
沒法解決，根本不能這樣調(diào)用。
雖然data函數(shù)中的this是指向VueComponent的，（配合理解：data中的數(shù)據(jù)是可以用this調(diào)用props中的數(shù)據(jù)的）但是在data中調(diào)用另一個屬性的時候，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;
}
}
顯示結(jié)果：
當(dāng)然如果fullName不需要在data中定義的話，在computed計算屬性中定義可能會優(yōu)雅。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。如有錯誤或未考慮完全的地方，望不吝賜教。
相關(guān)文章
冒泡事件處理是由內(nèi)而外發(fā)生的,例如有兩個父子div,給他們分別寫上點擊事件,點擊子div先響應(yīng)的是子div,再是父div,下面這篇文章主要給大家介紹了關(guān)于vue項目遇見事件冒泡該如何處理的相關(guān)資料,需要的朋友可以參考下2023-04-04
本文主要介紹了el-table表頭添加勾選框的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
詳解基于element的區(qū)間選擇組件校驗(交易金額)
這篇文章主要介紹了詳解基于element的區(qū)間選擇組件校驗(交易金額)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本文主要介紹了vue實現(xiàn)input輸入模糊查詢的三種方式嗎，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue下拉刷新組件的開發(fā)及slot的使用詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了vue單選按鈕,選中如何改變其當(dāng)前按鈕顏色。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)，在子組件上顯示不出來，本文給大家分享兩種解決方案幫助大家解決這個問題,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue中在新窗口打開頁面 及 Vue-router的使用,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
前端報錯npm ERR! cb() never called!問題解決辦法
最近接手了一個前臺項目,執(zhí)行npm install的時候一直報錯,所以這里就給大家總結(jié)下,這篇文章主要給給大家介紹了關(guān)于前端報錯npm?ERR! cb() never called!問題的解決辦法,需要的朋友可以參考下2024-05-05
Vue2.0+Vux搭建一個完整的移動webApp項目的示例
這篇文章主要介紹了Vue2.0+Vux搭建一個完整的移動webApp項目的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03