解决在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懒加载和子组件懒加载的区别详解
这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
2023-12-12
解决ant Design中this.props.form.validateFields未执行的问题
这篇文章主要介绍了解决ant Design中this.props.form.validateFields未执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue实现点击图片放大效果
这篇文章主要为大家详细介绍了vue实现点击图片放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
vue图片裁剪插件vue-cropper使用方法详解
这篇文章主要为大家详细介绍了vue图片裁剪插件vue-cropper使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
解决vue自定义指令导致的内存泄漏问题
这篇文章主要介绍了解决vue自定义指令导致的内存泄漏问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue+iview 实现可编辑表格的示例代码
这篇文章主要介绍了vue+iview 实现可编辑表格的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
基于Vue3实现的图片散落效果实例
最近工作中遇到一个效果还不错,所以想着实现一下,下面这篇文章主要给大家介绍了关于如何基于Vue3实现的图片散落效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
vite+vue3中如何使用router
这篇文章主要介绍了vite+vue3中如何使用router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
详解vue3.0 的 Composition API 的一种使用方法
这篇文章主要介绍了vue3.0 的 Composition API 的一种使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
解决vue axios的封装请求状态的错误提示问题
今天小编就为大家分享一篇解决vue axios的封装请求状态的错误提示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09