在vue中获取this.refs为空

在javascript里可以用原生方法去获取dom节点,而在vue中获取的方式是用this.$refs[dom]

问题

this.$refs[dom]获取时得到undefined

原因分析

vue里有个生命周期
大部分人遇到的这个问题都是在created里去获取的
下面主要简单介绍下生命周期里其中的两个:

  • created (实例创建成功,此时 data 中的数据显示出来了,dom还未生成)
  • mounted(dom生成,data数据在模板中显示出来)

如果在created方法里this.$refs[dom]去获取dom节点是获取不到的,因为dom还没有被渲染出来,而在mounted方法里是可以拿到的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 6,729评论 1 8
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 4,079评论 0 0
  • 从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩...
    zhoulujun阅读 5,305评论 0 1
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,124评论 1 4
  • Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务 处理逻辑、数据...
    云中一樵夫阅读 4,726评论 0 1