关于Vue3中element-plus的el-dialog对话框无法显示的问题及解决方法
最近今天在写一个停车场管理系统的项目时，在用vue3写前端时，在前端模板选择上，我一时脑抽，突然决定放弃SpringBoot，选择了以前几乎很少用的element-plus，然后果不其然，错误连连。最让我头疼的，就是dialog对话框无法显示的原因。
第一个原因：忘记将默认值修改为true。
简单说下逻辑，在element-plus中，你需要在data()方法中定义一个‘dialogVisible’值，不是dialogVisible也行，官网是这么定义的，其实就算你定义成‘wdnmd’也没有任何问题，如如：
data() {
return {
form: {},
wdnmd: false
}
},这个'wdnmd'就相当于是否显示对话框的钥匙，默认定义为 false，就是不显示，一般dialog对话框不显示的原因，大概率就是你忘记在按钮的方法中wdnmd修改为true.例如：
methods: {
editUser() {
wdnmd = true
},
第二个原因：将 :visible.sync="wdnmd"修改为v-model="wdnmd"(也是最蛋疼的一个原因)
例如：
将
<el-dialog title="编辑" :visible.sync="wdnmd" width="30%">
<el-button @click="wdnmd = false">取消</el-button>
<el-button type="primary" @click="save">修改</el-button>
</span>
</template>
</el-dialog>
修改为：
<el-dialog title="编辑" v-model="wdnmd" width="30%">
<el-button @click="wdnmd = false">取消</el-button>
<el-button type="primary" @click="save">修改</el-button>
</span>
</template>
</el-dialog>
这是element-plus最新修改的用法，如果你是从网上或者ai那里弄来的代码，大概率是一脸懵逼（没错，我就是这样），这是最近半年左右element-plus更新的用法，智障ai和网上的大部分源码都远离这个时间段，甚至是用vue2。
总结
如果以后在遇到这样搞不清楚的问题，记得先从基础开始，也就是从官网开始。
我简单说下我解决这个问题的过程，先是debug，在控制台确认wdnmd的值确实被修改为true，我便开始怀疑不是我个人的问题，于是我开始上网搜索，网上的答案都试过，没有用后，进入element-plus官网，找到对应的el-dialog用法，将官方的模板在自己的电脑上跑一下，然后依次对比错误的代码，就是改一段测一段，最后找到了这个问题。
到此这篇关于关于Vue3中element-plus的el-dialog对话框无法显示的可能原因。的文章就介绍到这了,更多相关vue3 el-dialog对话框无法显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue生命周期函数调用详解，本文将实现Vue生命周期相关代码的核心逻辑，从源码层面来理解生命周期，感兴趣的小伙伴可以参考一下2022-08-08
使用JSONP主要是目的通过动态创建Script，动态拼接url，进而抓取数据，实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法（前端）,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了el-tree树设置懒加载以及设置默认勾选方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue3+Vue-cli4项目中使用腾讯滑块验证码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
这篇文章主要介绍了如何为vue的项目添加单元测试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家介绍了Vue中使用watch同时监听多个值的实现方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
前端开发需要经常使用ECharts图表渲染数据信息，在一个项目中我们经常需要使用多个图表，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率。感兴趣的可以阅读一下本文2023-04-04
vue使用keep-alive后从部分页面进入不缓存示例详解
这篇文章主要给大家介绍了关于vue使用keep-alive后从部分页面进入不缓存的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了在vue中使用echarts实现飞机航线 水滴图 词云图,通过引入中国地图JS文件，会自动注册地图，文中结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了关于Vue3项目中引入html页面的相关资料,Vue3是一个JavaScript框架,通常我们使用它来构建单页应用程序(SPA),如果你想在HTML页面中使用Vue3,可以参考这篇文章,需要的朋友可以参考下2023-09-09
最新评论