使用this.$refs调用方法值为为undefined

前言

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。

---

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、原因？

vue 官方中对ref的使用中写道：关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

   也就是说也就是说如果在DOM结构中的某个DOM节点使用了v-if、v-shou、v-for（即根据获取到的后台数据来动态操作 DOM，即响应式）、 那么这些DOM事不会在mounted阶段中找到的，ref 只有等页面加载完成好之后才能调用 this.$refs获取子组件中的数据或者方法 。

二、解决方法

1

使用this.$refs如果要在mouend()中使用，必须要在this.$nextTick(()=>{ } ) 这里面实现，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

2

代码如下（示例）：

可以直接在updata()的生命周期函数中使用，由于mounted阶段是加载阶段，而updata阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)。

3

在methods:{ } 方法中使用，也需要使用this.$nextTick(()=>{ } ) 等到页面完全渲染完毕之后在调用即可。
代码如下（示例）：

this.$nextTick(() => {
	this.problemDetailsData = res
	res.map(item => {
	    this.$refs.pollutionMap.detailAddmarker(item, flag)
	})
})

---