vue elementUI dialog首次调用不加载/获取元素为null

最新推荐文章于 2023-04-11 20:52:35 发布
最新推荐文章于 2023-04-11 20:52:35 发布
阅读量973 收藏 2
点赞数
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rng__uzi/article/details/127652276
版权

原因：el-dialog未创建

解决方案：
this.dialogVisible=true
this.$nextTick(function(){
//在此调用
})
即先打开，等待他渲染完成之后再调用

橙灯
关注
vue实战入门进阶篇六：vue+elementui实现网站后台-新闻资讯界面实现
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
05-01 2991
vue实战入门进阶篇七：vue+elementui实现网站后台-新闻资讯界面实现
vue中调用百度地图 获取经纬度
yangli_的博客
11-01 1617
vue中调用百度地图 获取经纬度
vue3 在onMounted 调用async初始化数据函数是时，数据为空的问题
热门推荐
weixin_46463984的博客
03-12 1万+
vue3 在onMounted 调用async初始化数据函数时 ，数据为空的问题错误代码运行结果显示分析猜测原因验证最后修改代码结果其实这是一个很简单的问题 ，就是在``onMounted``中使用异步函数的时候要加上 ``async`` 错误代码 <script setup> import {ref,onMounted ,reactive} from 'vue' import { useRoute } from 'vue-router' import {getArticelById} from
vue element-ui 第一次打开Dialog 对话框无法加载内容的问题
weixin_45547638的博客
11-19 4298
vue element-ui 第一次打开Dialog 对话框无法显示内容 第二次正常显示 问题描述： 今天需要使用Dialog 弹框中加载video视频显示，问题如下 第一次点击弹框可以正常显示 但是内容不加载 报错 第二次可以正常显示内容也加载 问题原因： 出现这个问题的原因是js加载了 但是Dialog 的dom并没有加载完全导致js报错所以不加载 查看官方文档解释如下： Dialog 的内容...
获取element-ui的dialog中元素为null的问题
松烟入墨
01-24 2209
在打开弹窗的时候操作DOM，发现获取DOM为null 问题 如上图所示，在打开弹窗的时候，需要给按钮添加监听事件，上传文件 代码如下 getFileMD5() { const el = document.getElementById("upload-file"); const bmf = new BMF(); el.addEventListener( ...
成功解决：el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。（每次页面刷新后、第一次打开dialog窗口、图片数不加载）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
10-13 1921
在查看图片的时候、点击预览按钮，将图片放入dialog弹出框中。然而每次页面刷新、首次预览图片、打开的窗口中并没有图片展示？？？
el-dialog 弹框调用组件，只有第一次弹出调用组件接口，后面弹出不在调用接口问题解决
migexiaoliang的博客
09-11 2854
el-dialog 弹框调用组件，只有第一次弹出调用组件接口，后面弹出不在调用接口问题解决
dialog弹窗关不掉 vue_Vue 的 Dialog 弹窗组件
weixin_28745067的博客
01-14 1703
DialogVue 的 Dialog 模态框组件，包含了alert和confirm对话框。usenpm install vue-m-dialog复制代码import MDialog from 'vue-m-dialog'Vue.use(MDialog) // 将挂载 m-dialog组件和 Vue.prototype.$alert 和 Vue.prototype.$confirm复制代码如果 Vu...
关于easyui for vue的Dialog使用部分问题和解决
月想容的博客
01-07 908
目录 问题 分析 解决 问题 在easyui for vue 的 Dialog使用过程中，参照element-ui和网上的博客思路和代码，对Dialog的打开和关闭出现问题。 主要体现在 1.Dialog默认打开状态； 2.没有visible属性，用v-show或者v-if控制显示，出现异常。 分析 首先看easyui for vue的Dialog相关属性和方法 这是element-ui的Dialog属性和方法 可以看到，easyui for vue没有visibl.
elementUI 源码-打造自己的组件库，系列四：Dialog组件(原创)
m13837120071的博客
08-07 1857
来吧继续一起阅读组件源码，dialog组件安排上。个人觉得dialog组件的难点在于弹出框的流程，特别是层级的处理。 当然其他小的知识点也是不少的，这就是阅读源码的小快乐吧
vue求大佬解答 我点击按钮第一次获取不到数据 必须第二次才能拿到数据
nextpassword的博客
11-13 3241
大佬们 我点击人员按钮 第一次进去 没有获取到数据 必须第二次点击按钮进去才能获取到数据 我试了定时器 和判断是否拿到数据再打开模态框 都没用 判断第二种是否拿到数据的话 如图三 所示 第一次点击按钮 模态框不会打开 必须点击第二次才能打开模态框 所以我怀疑是我封装的axios的问题 图4-7是我axios的封装过程 图7是main.js导入封装组件 求大佬解答 在线等 急 ！！！ ...
使用easyui的dialog两次加载数据问题！
xiaoyanghapi的博客
08-16 4505
function addBusinessData(){ $('#formDialog').dialog({ title: '编辑', width: '980px', height: '600px', closed: false, cache: false,
Vue中使用Element 第一次打开el-dialog获取不到元素的解决办法
m0_46129241的博客
01-16 7189
第一次点击弹窗按钮，获取弹窗中的元素。打开弹窗获取元素为空，要第二次才能获取。如下为解决方法： 一、setTimeOut(fn,0) methods:{ btnMethods(){ vueObject.moreDialog = true; //获取元素 console.log('外：'+$('ul li').length); setTimeout(function()...
Dialog对话框 第二次打开显示第一次打开时的数据 解决办法
红烧咸咸鱼
06-01 2256
Dialog对话框 第二次打开显示第一次打开时的数据 解决办法 在 el-dialog 中添加 v-if = " 你所绑定的visible属性 " <!--解决方法--> <el-dialog title="" :visible.sync="dialogEdit" v-if='dialogEdit'> <editdialog :childData="childData" @EditDialog="getEditDialog"></editdialo
解决vue中第一次点击按钮无数据，第二次点击有数据
weixin_56042678的博客
04-11 2145
一般情况下看我们有没有声明接受数据的变量，如果没用声明的话，第一次点击按钮才会去声明变量，所以不会拿到数据，当第二次点击按钮时，此时就会拿到数据。解决方法，在return里面声明接受参数的变量，这样第一次点击按钮就可以拿到数据了。如果我们需要拿到数据，但是点击按钮数据没用拿到。
elementui中el-dialog初次打开能调mounted,再次打开不调,v-if解决
07-23 1818
el-dialog组件在第一次使用的时候没有问题，mounted也可以触发，但是关闭dialog后再次弹出就不再触发mounted，导致可能没有办法及时获取到新的数据。 解决办法：使用v-if即可
vue function (i)第一次点击不执行_高级前端开发者必会的34道Vue面试题解析（三）...
weixin_39770626的博客
12-12 328
前言通过前面的文章，我们认识了页面的响应是由Vue实例里的data函数所返回的数据变化而驱动，也重点学习了页面的响应与数据变化之间是是如何来联系起来的，并且分别在Vue2.x与3.x中，从零到一实现了两个版本下的数据变化驱动页面响应原理。接下来在本文里一起看看当数据变化时，从源码层面逐步分析一下触发页面的响应动作之后，如何做渲染到页面上，展示到用户层面的。同时也会了解在Vue中的异步方法NextT...
使用vue-element中的dialog弹窗中引入组件时第一次传值为空的解决方法
qq_42960546的博客
09-04 2098
父组件代码 <template> <div> <button @click="showDialoag('hello')"></button> <Contacts ref="contacts"/> </div> </template> <stript> import Contacts from "./contacts"; export default{ name:'Farther', data(){
dialog弹框 动态提示数据加载中...
chuyouyinghe的专栏
08-24 1226
版权声明：本文为CSDN博主「AaVictory.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/afufufufu/article/details/123713005。我是给个点击事件，然后弹出数据加载，3秒后消失。
vue <Dialog> 怎么动态控制消失或不消失弹窗，异步怎么取消
最新发布
10-15
在Vue.js中，`<Dialog>`（对话框或模态窗口）通常是一个组件，用于显示一些信息并允许用户进行交互。要动态地控制其可见性，你可以通过以下步骤操作： 1. **数据驱动**: 给`Dialog`组件绑定一个布尔属性，比如`isShowing`，默认值为`false`。当需要显示对话框时，将这个属性设置为`true`，隐藏时设置为`false`。 ```html <template> <Dialog v-model="isShowing"> <!-- 内容 --> </Dialog> </template> <script> export default { data() { return { isShowing: false, }; }, // ...其他methods }; </script> ``` 2. **事件处理**: 如果`Dialog`组件有关闭事件，如`@close`或`@cancel`，在你的方法里监听这个事件并在接收到信号时更新`isShowing`。 ```javascript methods: { onClose() { this.isShowing = false; // 可能需要取消异步请求，如果有的话 }, }, ``` **异步取消**： 如果你在弹出`Dialog`之前发起了某个异步请求，并希望在关闭`Dialog`时取消它，可以使用Promise或async/await，并保存返回的Promise到一个变量。然后在`onClose`方法中，调用`reject`或`resolve`来取消或完成该请求。 ```javascript data() { return { isShowing: false, dialogLoading: null, }; }, methods: { async showDialog() { this.dialogLoading = axios.get('your-api-url'); // ...在Dialog内打开 }, onClose() { if (this.dialogLoading) { this.dialogLoading.cancel(); // 如果是axios, 使用cancel方法 // 或者 // this.dialogLoading.then(null, () => {/* do nothing */}); } this.isShowing = false; }, }, ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值