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