解決在vue的mounted中獲取對象為null問題
背景
因?yàn)?需要在項(xiàng)目中需要將獲取的列表對象賦值給另外一個(gè)控件。
所以使用了mounted
按照vue的生命周期，在create()中增加了獲取數(shù)據(jù)的getList()方法，然后賦值。
然后在mounted()中增加了對賦值對象的相關(guān)操作。
vue生命周期圖
問題
按照理想的情況，應(yīng)該可以將賦值后的對象進(jìn)行相關(guān)操作的。
但是實(shí)際結(jié)果卻是打臉了，獲取不到對象數(shù)據(jù)。
console.log打印出來的結(jié)果為null。
按照道理來講，不應(yīng)該哈。
解決方案
度娘了下，發(fā)現(xiàn)還真是自己的問題，因?yàn)樵赾reate()中，走的是遠(yuǎn)程ajax的異步調(diào)用。
vue初始化的時(shí)候，是按照順序一路下來的，異步的東西是不會等待你的，所以初始化的data中，當(dāng)前對象是什么，就會同步傳遞過來的。
既然找到了真兇，那么處理的方案一般就是下面的方式了。
1、不走mounted()，使用watch的監(jiān)聽方式來處理。
watch: {
initEditData(){
//TODO 數(shù)據(jù)賦值 張三 2022-05-09
}
}2、用await來處理，await一般和ansyc一起的，感興趣的可以自己去摸下。
/**
* 動態(tài)賦值
*/
async function testSetVal() {
//在此等待數(shù)據(jù)處理完成
let valObj= await getList();
console.log(valObj);
}總結(jié)
涉及到異步，一定要考慮并行的問題
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過組價(jià)刷新的案列給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開時(shí)縮小的代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開時(shí)縮小，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配
這篇文章主要為大家介紹了vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
使用typescript構(gòu)建Vue應(yīng)用的實(shí)現(xiàn)
這篇文章主要介紹了使用typescript構(gòu)建Vue應(yīng)用的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue watch深度監(jiān)聽對象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了vue watch深度監(jiān)聽對象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
vue動態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式
這篇文章主要介紹了vue動態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了前端必知必會之Vue?v-if指令的相關(guān)資料,Vue中的條件渲染指令v-if、v-else-if和v-else用于根據(jù)條件動態(tài)創(chuàng)建HTML元素,通過使用比較運(yùn)算符和邏輯運(yùn)算符,可以編寫復(fù)雜的條件邏輯,需要的朋友可以參考下2025-02-02
詳解vue-cli開發(fā)環(huán)境跨域問題解決方案
本篇文章主要介紹了vue-cli開發(fā)環(huán)境跨域問題解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3中的計(jì)算屬性和屬性監(jiān)聽的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08