Vue Element-ui 第一次点击打开el-dialog获取不到元素的解决办法

第一次点击弹窗按钮,获取弹窗中的元素。打开弹窗获取元素为空,要第二次才能获取。如下为解决方法:

一、setTimeOut(fn,0)

methods:{
	btnMethods(){
		vueObject.moreDialog = true;
		//获取元素
    	console.log('外:'+$('ul li').length);
    	setTimeout(function(){
    		//获取元素
    		console.log("内:"+$('ul li').length);   
    	},0);
}

效果如下:
在这里插入图片描述

二、this.$nextTick(callback)

methods:{
	btnMethods(){
		vueObject.moreDialog = true;
		//获取元素
    	console.log('外:'+$('ul li').length);
    	this.$nextTick(function(){
			//获取元素
    		console.log("内:"+$('ul li').length);
		});
}

效果如下:
在这里插入图片描述

注意:this.$nextTick(callback),当dom更新后执行的回调。

三、@opened

opened是Dialog对话框中的事件。
官网描述如下:
在这里插入图片描述

HTML
<el-dialog @opened="openMethods">
</el-dialog>

JavaScript
methods:{
	openMethods(){
		//获取元素
	 	console.log('外:'+$('ul li').length);
	}
}

注意:当使用opened方法时,是打开弹窗之后再进行的操作。

发布了2 篇原创文章 · 获赞 0 · 访问量 13
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览