快捷導航

關(guān)于Vue3中element-plus的el-dialog對話框無法顯示的問題及解決方法

更新時間：2023年10月24日 17:00:05 作者：怠惰の于

最近今天在寫一個停車場管理系統(tǒng)的項目時,在用vue3寫前端時,在前端模板選擇上,我一時腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯誤連連,下面給大家分享dialog對話框無法顯示的原因,感興趣的朋友一起看看吧

最近今天在寫一個停車場管理系統(tǒng)的項目時，在用vue3寫前端時，在前端模板選擇上，我一時腦抽，突然決定放棄SpringBoot，選擇了以前幾乎很少用的element-plus，然后果不其然，錯誤連連。最讓我頭疼的，就是dialog對話框無法顯示的原因。

第一個原因：忘記將默認值修改為true。
簡單說下邏輯，在element-plus中，你需要在data()方法中定義一個‘dialogVisible’值，不是dialogVisible也行，官網(wǎng)是這么定義的，其實就算你定義成‘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最新修改的用法，如果你是從網(wǎng)上或者ai那里弄來的代碼，大概率是一臉懵逼（沒錯，我就是這樣），這是最近半年左右element-plus更新的用法，智障ai和網(wǎng)上的大部分源碼都遠離這個時間段，甚至是用vue2。

總結(jié)

如果以后在遇到這樣搞不清楚的問題，記得先從基礎(chǔ)開始，也就是從官網(wǎng)開始。

我簡單說下我解決這個問題的過程，先是debug，在控制臺確認wdnmd的值確實被修改為true，我便開始懷疑不是我個人的問題，于是我開始上網(wǎng)搜索，網(wǎng)上的答案都試過，沒有用后，進入element-plus官網(wǎng)，找到對應(yīng)的el-dialog用法，將官方的模板在自己的電腦上跑一下，然后依次對比錯誤的代碼，就是改一段測一段，最后找到了這個問題。

到此這篇關(guān)于關(guān)于Vue3中element-plus的el-dialog對話框無法顯示的可能原因。的文章就介紹到這了,更多相關(guān)vue3 el-dialog對話框無法顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: