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()中定義的屬性:
在請(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è)參考,也希望大家多多支持好吧啦網(wǎng)。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教。
相關(guān)文章:
1. 解決vue項(xiàng)目中遇到 Cannot find module ‘chalk‘ 報(bào)錯(cuò)的問(wèn)題2. vue 項(xiàng)目@change多個(gè)參數(shù)傳值多個(gè)事件的操作3. vue 中this.$set 動(dòng)態(tài)綁定數(shù)據(jù)的案例講解4. Vue 路由返回恢復(fù)頁(yè)面狀態(tài)的操作方法5. 基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點(diǎn)續(xù)傳的全局上傳插件功能6. 探究Android客戶端網(wǎng)絡(luò)預(yù)連接優(yōu)化機(jī)制7. Android Studio實(shí)現(xiàn)簡(jiǎn)單計(jì)算器APP8. vue使用webSocket更新實(shí)時(shí)天氣的方法9. Android在自定義類中實(shí)現(xiàn)自定義監(jiān)聽器方式10. Vue中引入svg圖標(biāo)的兩種方式
