vue中使用refs定位dom出现undefined的解决方法

之前在公司做项目，一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题，就是在mounted(){}钩子里面使用this.$refs.xxx，打印出来的却是undefined？

于是我就对比了一下之前使用ref定位的.vue文件，发现了他们之间的区别。

我们要想知道为什么会定位不到某个DOM节点，我们首先要理解mounted(){}这个钩子函数是用来做什么的。

下面是vue官方给出的vue生命周期（部分），正如官方所说的一样，一开始不必先理解，不过随这你的学习与使用，他的参考价值会越来越高。

原来，mounted阶段，DOM结构准备就绪，但是这里的准备就绪需要特别说明一下：

DOM结构已经出来了，但是如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的。

此时的mounted阶段，一般是用于发起后端请求，拿回数据，配合路由钩子做一些事情，简单来说就是在mounted钩子中加载数据而已，加载回来的数据是不会再这个阶段更新的DOM中的

所以如果在mounted钩子中使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM节点，返回来的只能是undefined，因为在mounted阶段他们根本不存在！！

经过检验，上面端文字是错误的，$refs定位不到的主要原因是因为v-if、v-for、v-show这些语句如果依赖父组件传来的参数的话，该该参数是在mounted()阶段子还没获取得到~~~~！！！！

如果想要真正地在DOM加载完成后拿到数据，就需要调用VUE的全局api ： this.$nextTick(() => {})

如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理)，此时，ref、数据等等全部都挂载到DOM结构上去，在update阶段使用this.$refs.xxx，就100%能找到该DOM节点。

updated与mounted不同的是，在每一次的DOM结构更新，vue都会调用一次updated(){}钩子函数！而mounted仅仅只执行一次而已

简单来说，只要在调试的时候，能看到元素的存在，在updated阶段都可以使用this.$refs.xxx找到对应的DOM节点！

关于$refs的使用，官方文档特别给出了以下提示：

使用的时候就注意咯- -

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • Vue在页面数据渲染完成之后的调用方法

    在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度.之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现. nextTick:在下次 DOM 更新循环结束之后执行延迟回调. watch:用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调. 之前我是这样子使用nex

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • vue中使用refs定位dom出现undefined的解决方法

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • Vue中的v-for指令不起效果的解决方法

    我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"> <ul> <li> {{ item.message }} </li> </ul> </div> 结果发现不好用,数据读入了但是没有显示 于是我后来看官网的例子才明白,原来是id和v-for不在一个层级上,官网的例子如下,我按照不在一个层级上改,果然好用了 <ul id=&quo

  • Vue中"This dependency was not found"问题的解决方法

    今天在初始化项目中,出现了一个奇怪的情况:明明路径是对的,但是编译的时候,一直报"This dependency was not found"的错. 代码如下: import Vue from 'vue' import App from './App' import router from './router' import 'common/stylus/index.styl' /* eslint-disable no-new */ new Vue({ el: '#app', rend

  • vue中设置height:100%无效的问题及解决方法

    在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效. App.vue文件 <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font

  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢? 因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在web

  • vue 中滚动条始终定位在底部的方法

    滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight 但是问题来了,滚动条并没有到达底部,而是距离底部还有一点距离(一脸懵逼) 估计是动态加载数据时,数据还未加载,滚动条就已经执行,知道原因了,那就实践呗. 第二次尝试,利用vue的watch监控数据的改变,然后动态修改滚动条到顶部的距离

  • Vue中简单的虚拟DOM是什么样

    目录 1. 一个简单的虚拟DOM长什么样 2. Vue中的虚拟DOM长什么样 3. Vue中的虚拟DOM实现 4. createTextVNode 1. 一个简单的虚拟DOM长什么样 其实当今前端框架不少用到了虚拟DOM的技术,但各家有各家的实现.这里我们先看下比较简单的虚拟DOM库snabbdom的虚拟DOM长什么样 我们假设有html如下,其实也就是所谓的真实DOM <div class="message">Hello World</div> 那么snabb

  • vue中实现高德定位功能

    一.获取key及在index.htm中引入 首先需要成为高德开发者,申请到适合项目的key.并在index.html中进行引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script> 二.在配置文件中进行相应配置 根据vue脚手架的不用需要在不同的文件

  • vue中百度地图定位及附近搜索功能使用步骤

    目录 1.地图初始化相关 2.获取当前定位 3.根据当前定位地址附近搜索建议 1.地图初始化相关 文档:lbs.baidu.com/index.php?t… 申请账号 => 创建应用 => 生成key值 => 引入百度地图,替换key值 在出口html(public/html)文件下引入标签 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&

随机推荐