解决在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的mounted中仍然加载渲染不出echarts的方法问题
• vue mounted周期中document.querySelectorAll()获取不到元素的解决
• vue中onmounted周期里获取不到dom的原因及分析
• vue mounted()函数中无法定义初始化样式的原因分析
• vue-mounted中如何处理data数据
• Vue常见错误Error in mounted hook解决办法