解決在vue的mounted中獲取對象為null問題
更新時間：2024年03月06日 15:57:05 作者：沛哥兒
這篇文章主要介紹了解決在vue的mounted中獲取對象為null問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景
因為 需要在項目中需要將獲取的列表對象賦值給另外一個控件。
所以使用了mounted
按照vue的生命周期，在create()中增加了獲取數(shù)據(jù)的getList()方法，然后賦值。
然后在mounted()中增加了對賦值對象的相關(guān)操作。
vue生命周期圖
問題
按照理想的情況，應(yīng)該可以將賦值后的對象進行相關(guān)操作的。
但是實際結(jié)果卻是打臉了，獲取不到對象數(shù)據(jù)。
console.log打印出來的結(jié)果為null。
按照道理來講，不應(yīng)該哈。
解決方案
度娘了下，發(fā)現(xiàn)還真是自己的問題，因為在create()中，走的是遠(yuǎn)程ajax的異步調(diào)用。
vue初始化的時候，是按照順序一路下來的，異步的東西是不會等待你的，所以初始化的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é)
涉及到異步，一定要考慮并行的問題
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue3中，有多種方法可以實現(xiàn)組件之間的通信，本文就通過代碼示例給大家總結(jié)一些vue3實現(xiàn)組件通信的常用方法,需要的朋友可以參考下2023-06-06
基于vue3+TypeScript實現(xiàn)一個簡易的Calendar組件
最近在學(xué)習(xí) react,在學(xué)習(xí)到使用 react 開發(fā) Calendar 組件的時候,突然聯(lián)想到使用 vue 進行 Calendar 功能的實現(xiàn),因為目前使用的技術(shù)棧是 vue,剛好可以加深下對 vue3 和 ts 的使用印象,所以本文給大家介紹了基于vue3+TypeScript實現(xiàn)一個簡易的Calendar組件2024-05-05
詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法
本篇文章主要介紹了詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法，在VUE開發(fā)時，數(shù)據(jù)可以使用jquery和vue-resource來獲取數(shù)據(jù)，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家詳細(xì)介紹了vue的全選組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
本篇文章主要介紹了vue過渡和animate.css結(jié)合使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
最近在項目里用Element UI的動態(tài)組件時,遇到了樣式修改的難題——明明寫了CSS,但死活不生效！相信不少小伙伴也踩過這個坑,今天小楊就來分享幾個實用技巧,幫你輕松搞定這類問題,需要的朋友可以參考下2025-07-07
Vue.js?的計算屬性和偵聽器詳解(提升數(shù)據(jù)處理與交互的關(guān)鍵工具)
在Vue.js開發(fā)中,計算屬性與偵聽器是極為關(guān)鍵的特性,它們極大地提升了數(shù)據(jù)處理與交互邏輯實現(xiàn)的便捷性和高效性,本文給大家介紹Vue.js?的計算屬性和偵聽器：提升數(shù)據(jù)處理與交互的關(guān)鍵工具,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了elementPuls 表格反選實現(xiàn)示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
第一次寫Vue項目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說，先上代碼，我再講一些要注意的細(xì)節(jié)2022-12-12
vue3中的elementPlus全局組件中文轉(zhuǎn)換方式
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07