解决在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);
}总结
涉及到异步，一定要考虑并行的问题
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中的依赖注入provide和inject简单介绍,provide 选项允许我们指定我们想要提供给后代组件的数据/方法，本文通过组价刷新的案列给大家详细讲解，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue.js实现点击图标放大离开时缩小，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要为大家介绍了vue自定义loader将行内样式px转rem适配示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了使用typescript构建Vue应用的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了vue watch深度监听对象实现数据联动的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue动态生成新表单并且添加验证校验规则方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了elementUI踩坑记录-el-table问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了前端必知必会之Vue v-if指令的相关资料,Vue中的条件渲染指令v-if、v-else-if和v-else用于根据条件动态创建HTML元素,通过使用比较运算符和逻辑运算符,可以编写复杂的条件逻辑,需要的朋友可以参考下2025-02-02
本篇文章主要介绍了vue-cli开发环境跨域问题解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-06-06
这篇文章主要为大家详细介绍了Vue3中的计算属性和属性监听的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
最新评论