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

第一個(gè)原因：忘記將默認(rèn)值修改為true。

簡(jiǎn)單說下邏輯，在element-plus中，你需要在data()方法中定義一個(gè)‘dialogVisible’值，不是dialogVisible也行，官網(wǎng)是這么定義的，其實(shí)就算你定義成‘wdnmd’也沒有任何問題，如如：

這個(gè)'wdnmd'就相當(dāng)于是否顯示對(duì)話框的鑰匙，默認(rèn)定義為?false，就是不顯示，一般dialog對(duì)話框不顯示的原因，大概率就是你忘記在按鈕的方法中wdnmd修改為true.例如：

第二個(gè)原因：將 :visible.sync="wdnmd"修改為v-model="wdnmd"(也是最蛋疼的一個(gè)原因)

例如：

將

修改為：

這是element-plus最新修改的用法，如果你是從網(wǎng)上或者ai那里弄來的代碼，大概率是一臉懵逼（沒錯(cuò)，我就是這樣），這是最近半年左右element-plus更新的用法，智障ai和網(wǎng)上的大部分源碼都遠(yuǎn)離這個(gè)時(shí)間段，甚至是用vue2。

總結(jié)

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

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

總之，找到代碼錯(cuò)在何處，大部分看官網(wǎng)就完事了。