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關(guān)鍵字搜索功能實(shí)戰(zhàn)小案例
在vue項(xiàng)目中,搜索功能是我們經(jīng)常需要使用的一個(gè)場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue關(guān)鍵字搜索功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue數(shù)據(jù)雙向綁定原理及簡(jiǎn)單實(shí)現(xiàn)方法
vue數(shù)據(jù)雙向綁定是通過(guò)數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來(lái)實(shí)現(xiàn)的.本文重點(diǎn)給大家介紹Vue數(shù)據(jù)雙向綁定原理及簡(jiǎn)單實(shí)現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要為大家介紹了vue使用websocket概念及示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue.js中created()與activated()的個(gè)人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個(gè)人使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案
這篇文章主要介紹了vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法
這篇文章主要介紹了Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
詳解Vue微信公眾號(hào)開(kāi)發(fā)踩坑全記錄
本篇文章主要介紹了詳解Vue微信公眾號(hào)開(kāi)發(fā)踩坑全記錄，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
CryptoJS是一個(gè)強(qiáng)大的JavaScript庫(kù),它提供了多種加密解密功能,尤其是AES加密方法,使用CryptoJS,我們可以有效地保護(hù)數(shù)據(jù)安全,防止信息泄露,通過(guò)簡(jiǎn)單的安裝和函數(shù)編寫(xiě),本文給大家介紹Vue3 如何使用CryptoJS加密,感興趣的朋友一起看看吧2024-10-10
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。本文給大家介紹Vue.js開(kāi)發(fā)環(huán)境搭建的詳解講解，感興趣的朋友一起看看吧2016-11-11
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03