解决在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解决办法

目录

背景
问题
解决方案
总结

因为需要在项目中需要将获取的列表对象赋值给另外一个控件。

所以使用了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解决办法

mounted获取对象为null vue mounted vue mounted获取对象

更多文章