vue第一次获取不到元素的解决方法记录

前言

vue中第一次获取不到元素的解决办法，是否经常第一次点击弹窗按钮，获取弹窗中的元素。打开弹窗获取元素为空，要第二次才能获取。

一、更新dom后获取

this.$nextTick(callback)
methods: {
    play() {
        //获取元素
        console.log($('#video'));
        this.$nextTick(function() {
            //获取元素
            console.log($('#video'));
        });
    }
}

二、通过定时器获取

setTimeOut(fn, 0)
methods:{
    play() {
        //获取元素
        console.log($('#video'));
        setTimeOut(function(){
            //获取元素
            console.log($('#video'));
        }, 0);
    }
}

三、通过触发事件获取

@opened
<el-dialog @opened="play"></el-dialog>

methods: {
    play() {
        //获取元素
        console.log($('#video'));
    }
}

总结

到此这篇关于vue第一次获取不到元素解决方法的文章就介绍到这了,更多相关vue获取不到元素内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

  • vue如何获取自定义元素属性参数值的方法

    vue如何获取自定义元素属性参数值的方法

    偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写: <span data-num="21" ref=&quo

  • vue获取当前点击的元素并传值的实例

    html: <span @click='zan(pl.id)' :data-id='pl.id'></span> js: zan(e){ var target=event.target; var dataid=e;//(pl.id的值); $(target)//当前点击的dom } 以上这篇vue获取当前点击的元素并传值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中兄弟组件之间互相传值实例 vue.js获得

  • 在vue中获取dom元素内容的方法

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted

  • Vue获取DOM元素样式和样式更改示例

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script>

  • Vue获取页面元素的相对位置的方法示例

    今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题 发现问题 当我滚动到元素的位置时候,我想把元素固定在头部 // html 结构 <div :class="['source-subnav', isFixed ? 'tab-nav-fixed' : '']" re

  • vue获取dom元素注意事项

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个 this.$nextTick(()=>{ //函数 }) 来获取,发现根本没用啊

  • vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

    this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽.高.距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • vue第一次获取不到元素的解决方法记录

    前言 vue中第一次获取不到元素的解决办法,是否经常第一次点击弹窗按钮,获取弹窗中的元素.打开弹窗获取元素为空,要第二次才能获取. 一.更新dom后获取 this.$nextTick(callback) methods: { play() { //获取元素 console.log($('#video')); this.$nextTick(function() { //获取元素 console.log($('#video')); }); } } 二.通过定时器获取 setTimeOut(fn, 0

  • vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的.  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,

  • VUEX采坑之路之获取不到$store的解决方法

    今天在写vuex的时候遇到了一个特别无语的问题,找了半个小时才找到这个问题,所以贴出来,大家在遇到和我一样的问题的时候不会太过慌张 在第一次写vuex的时候无论如何获取不到$store,后来找了好久才发现是我给全局VUE注入的时候注入的是Store而非store 这一个字母之差看上去可能没什么问题,可就是获取不到全局的$store; 代码奉上 // The Vue build version to load with the `import` command // (runtime-only o

  • AngularJS出现$http异步后台无法获取请求参数问题的解决方法

    本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法.分享给大家供大家参考,具体如下: angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据. 原理分析(网上的分析): 对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用.发起请求.读取响应.检查状态码,最后处理服务端的响应.整个过程示例如下: var xmlht

  • TinyMCE提交AjaxForm获取不到数据的解决方法

    本文实例分析了TinyMCE提交AjaxForm获取不到数据的解决方法.分享给大家供大家参考.具体分析如下: 在没有使用AjaxForm前,我做的一个小小的评论提交的Web form,评论内容使用了TinyMCE做文本编辑.为了增加一点点的用户体验,就顺手拿AjaxForm来实现Ajax提交.可是发现出现了一个意外的事情.就是每次提交,第一次提交时,AjaxForm会无法获得当前编辑的评论内容,即TextArea里面的内容,要再点击一次提交,才能将TextArea的内容提交上去. 关键是Tiny

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • JS与jQuery实现子窗口获取父窗口元素值的方法

    JS与jQuery实现子窗口获取父窗口元素值的方法

    本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="

  • 配置android开发环境时出现eclipse获取不到ADT的解决方法

    本文实例讲述了配置android开发环境时出现eclipse获取不到ADT的解决方法.分享给大家供大家参考,具体如下: 在安装完Android SDK后eclipse要获取ADT, 可是由于GFW的存在, eclipse经常无法从http://dl-ssl.google.com/android/eclipse 获取到任何东西. 下面提供解决方法: 以往安装ADT根本就不是个问题,可是现在就是个大问题了,联通的宽带网络连www.google.com.hk都打不开,你叫我们这些P民怎么活? 无论ht

  • C#实现获取枚举中元素个数的方法

    本文以一个简单实例讲述了C#实现获取枚举中元素个数的方法,对于C#学习来说是需要加以牢固掌握的技巧.分享给大家供大家参考之用.具体如下: 实现该功能可以使用枚举基类System.Enum的GetNames(Type t) 方法来获取某个枚举中的元素列表. 具体功能代码如下: enum EnumTest { type1, type2, } class Program { static void Main(string[] args) { EnumTest e = new EnumTest(); s

  • jQuery Validate 无法验证 chosen-select元素的解决方法

    chosen-select元素执行了chosen()方法后,为select元素加上了style="display: none;"进行隐藏,然后重新构造了一个看起来像select的下拉列表. 而jQuery Validate默认忽略对隐藏元素进行校验,因此我们要把select排除.在validate()方法的参数中增加ignore属性,将select从忽略的隐藏元素中剔除. $("select").validate({ignore: ":hidden:not

随机推荐