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

 更新时间:2021年06月01日 10:45:06   作者:autofelix  
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作。这篇文章主要给大家介绍了关于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获取不到元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue前端利用slice()方法实现分页器

    Vue前端利用slice()方法实现分页器

    分页功能是常见的需求之一,本文主要介绍了Vue前端利用slice()方法实现分页器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue中当图片地址无效的时候,显示默认图片的方法

    vue中当图片地址无效的时候,显示默认图片的方法

    今天小编就为大家分享一篇vue中当图片地址无效的时候,显示默认图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue Getters和mapGetters的原理及使用示例详解

    Vue Getters和mapGetters的原理及使用示例详解

    Vuex的核心概念包括state、mutations、actions、getters和modules,今天,我们要深入探讨其中一个关键部分:getters,以及它的相关辅助函数mapGetters,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • 详解vue微信网页授权最终解决方案

    详解vue微信网页授权最终解决方案

    这篇文章主要介绍了 详解vue微信网页授权最终解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

    vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

    这篇文章主要介绍了vue利用全局导航守卫作登录后跳转到未登录前指定页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 用vue2.0实现点击选中active其他选项互斥的效果

    用vue2.0实现点击选中active其他选项互斥的效果

    这篇文章主要介绍了用vue2.0实现点击选中active其他选项互斥的效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue写一个组件

    vue写一个组件

    这篇文章主要介绍了vue组写一个组件,需要的朋友可以参考下
    2018-04-04
  • vue实现大文件分片上传与断点续传到七牛云

    vue实现大文件分片上传与断点续传到七牛云

    这篇文章介绍了vue实现大文件分片上传与断点续传到七牛云的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • JS图片懒加载库VueLazyLoad详解

    JS图片懒加载库VueLazyLoad详解

    这篇文章主要为大家介绍了JS图片懒加载库VueLazyLoad示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue3中ref的用法举例总结(避免混淆)

    Vue3中ref的用法举例总结(避免混淆)

    这篇文章主要给大家介绍了关于Vue3中ref的用法举例总结的相关资料,ref()接受一个内部值,返回一个响应式的可更改的ref对象,此对象只有一个指向其内部值的属性.value,需要的朋友可以参考下
    2023-10-10

最新评论