解决在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-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的2021-11-11
Vue拖拽组件(Draggable)是一个允许与View-Model同步进行拖放排序的Vue组件,下面这篇文章主要给大家介绍了关于Vue.Draggable使用文档的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
今天小编就为大家分享一篇vue.js循环radio的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
在vue的项目开发中,我们会遇到加载excel或者csv等情形,这个示例展示了这个需求,上传一个excel文件,通过解析,生成数组,然后再列表中将内容展示出来,这篇文章主要介绍了vue上传解析excel文件,列表中输出内容,需要的朋友可以参考下,2023-09-09
这篇文章主要介绍了Vue项目自动转换 px 为 rem的实现方法，本文是通过一系列的配置后，转换成热门，具体内容详情大家跟随小编一起通过本文学习吧2018-10-10
这篇文章主要为大家详细介绍了vue的路由，路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源，本文具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
本篇文章主要介绍了详解VueJs前后端分离跨域问题，详细介绍了在项目内设置代理（proxyTable）的方式来解决跨域问题，有兴趣的可以了解一下2017-05-05
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
本篇文章主要介绍了Vue2 利用 v-model 实现组件props双向绑定的优美解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
一个home页面,点击左边的菜单栏,右边显示页面,因此都知道在右边放一个router-view然后配置路由即可,然而问题出现在：重新打开的时候,默认是白色空的,遇到这样的问题如何解决呢,下面小编给大家分享Vue让router-view默认显示页面操作方法,感兴趣的朋友一起看看吧2024-03-03
ElementPlus el-message-box样式错位问题及解决
这篇文章主要介绍了ElementPlus el-message-box样式错位问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论