前言
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
一、原因?
vue 官方中对ref的使用中写道:关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。
也就是说也就是说如果在DOM结构中的某个DOM节点使用了v-if、v-shou、v-for(即根据获取到的后台数据来动态操作 DOM,即响应式)、 那么这些DOM事不会在mounted阶段中找到的,ref 只有等页面加载完成好之后才能调用 this.$refs获取子组件中的数据或者方法 。
二、解决方法
1
使用this. r e f s 如果要在 m o u e n d ( ) 中使用,必须要在 t h i s . refs如果要在mouend()中使用,必须要在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)
})
})