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实现页面自适应的常用4种方法

    vue实现页面自适应的常用4种方法

    前端页面自适应有很多方法可以实现,本文小编将为大家详细介绍四种常用的方法,并提供相应的代码示例,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • 如何在 Vite 项目中自动为每个 Vue 文件导入 base.less

    如何在 Vite 项目中自动为每个 Vue 文件导入 base.les

    在Vite配置中通过添加css.preprocessorOptions实现自动导入base.less,简化Vue组件的样式设置,提高代码的可维护性,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • Vue.js函数式组件的全面了解

    Vue.js函数式组件的全面了解

    函数式组件就是函数是组件,组件是函数,它的特征是没有内部状态、没有生命周期钩子函数、没有this(不需要实例化的组件),这篇文章主要给大家介绍了关于Vue.js函数式组件的相关资料,需要的朋友可以参考下
    2021-10-10
  • 如何利用Vue+Element做个小页面

    如何利用Vue+Element做个小页面

    vue使用element写东西让我感觉到了特别的方便,下面这篇文章主要给大家介绍了关于如何利用Vue+Element做个小页面的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • Element-UI清空表单及验证不生效的问题解决

    Element-UI清空表单及验证不生效的问题解决

    本文主要介绍了Element-UI清空表单及验证不生效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • vue项目实现页面跳转的方法

    vue项目实现页面跳转的方法

    这篇文章主要给大家分享的是vue项目实现页面跳转的方法,vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转,需要的朋友可以参考一下
    2021-11-11
  • vue登录以及权限验证相关的实现

    vue登录以及权限验证相关的实现

    这篇文章主要介绍了vue登录以及权限验证相关的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 使用vue3+ts打开echarts的正确方式

    使用vue3+ts打开echarts的正确方式

    这篇文章主要给大家介绍了关于使用vue3+ts打开echarts的正确方式,在Vue3中使用ECharts组件可以方便地创建各种数据可视化图表,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue数据代理的原理和实现

    Vue数据代理的原理和实现

    数据代理是什么?通过一个对象代理,对另一个对象中属性的操作,简单就是说:可以通过 对象b 对 对象a 中的属性进行操作,这里我学到的数据代理是用Object.defineProperty这个方法进行操作
    2022-11-11
  • vue构建动态表单的方法示例

    vue构建动态表单的方法示例

    这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论