解决在vue的mounted中获取对象为null问题
更新时间：2024年03月06日 15:57:05 作者：沛哥儿
这篇文章主要介绍了解决在vue的mounted中获取对象为null问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
背景
因为 需要在项目中需要将获取的列表对象赋值给另外一个控件。
所以使用了mounted
按照vue的生命周期，在create()中增加了获取数据的getList()方法，然后赋值。
然后在mounted()中增加了对赋值对象的相关操作。
vue生命周期图
问题
按照理想的情况，应该可以将赋值后的对象进行相关操作的。
但是实际结果却是打脸了，获取不到对象数据。
console.log打印出来的结果为null。
按照道理来讲，不应该哈。
解决方案
度娘了下，发现还真是自己的问题，因为在create()中，走的是远程ajax的异步调用。
vue初始化的时候，是按照顺序一路下来的，异步的东西是不会等待你的，所以初始化的data中，当前对象是什么，就会同步传递过来的。
既然找到了真凶，那么处理的方案一般就是下面的方式了。
1、不走mounted()，使用watch的监听方式来处理。
watch: {
initEditData(){
//TODO 数据赋值 张三 2022-05-09
}
}2、用await来处理，await一般和ansyc一起的，感兴趣的可以自己去摸下。
/**
* 动态赋值
*/
async function testSetVal() {
//在此等待数据处理完成
let valObj= await getList();
console.log(valObj);
}总结
涉及到异步，一定要考虑并行的问题
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue3中，有多种方法可以实现组件之间的通信，本文就通过代码示例给大家总结一些vue3实现组件通信的常用方法,需要的朋友可以参考下2023-06-06
基于vue3+TypeScript实现一个简易的Calendar组件
最近在学习 react,在学习到使用 react 开发 Calendar 组件的时候,突然联想到使用 vue 进行 Calendar 功能的实现,因为目前使用的技术栈是 vue,刚好可以加深下对 vue3 和 ts 的使用印象,所以本文给大家介绍了基于vue3+TypeScript实现一个简易的Calendar组件2024-05-05
本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法，在VUE开发时，数据可以使用jquery和vue-resource来获取数据，有兴趣的可以了解一下。2017-01-01
这篇文章主要为大家详细介绍了vue的全选组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
本篇文章主要介绍了vue过渡和animate.css结合使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最近在项目里用Element UI的动态组件时,遇到了样式修改的难题——明明写了CSS,但死活不生效！相信不少小伙伴也踩过这个坑,今天小杨就来分享几个实用技巧,帮你轻松搞定这类问题,需要的朋友可以参考下2025-07-07
Vue.js 的计算属性和侦听器详解(提升数据处理与交互的关键工具)
在Vue.js开发中,计算属性与侦听器是极为关键的特性,它们极大地提升了数据处理与交互逻辑实现的便捷性和高效性,本文给大家介绍Vue.js 的计算属性和侦听器：提升数据处理与交互的关键工具,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了elementPuls 表格反选实现示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
第一次写Vue项目，要用到router.js,看了一下官方文档，还是很懵逼，不知道怎么配置，又去看视频查资料，最后终于搞定了。话不多说，先上代码，我再讲一些要注意的细节2022-12-12
这篇文章主要介绍了vue3中的elementPlus全局组件中文转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论