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