最近在做的項目有一個功能 需要在dialog彈出框輸入用戶的登錄信息 於是乎遇到了一個喪心病狂的報錯
找了各種搜索引擎 沒有任何解決方案(ps：是用Vuetify的開發者太少了嗎🤣)
功夫不負有心人 在不斷的嘗試下 最終還是解決了👍
問題描述
在彈出框第一次打開時 沒有任何異常
然而問題來了 在第二次打開彈出框時 點擊裏面的文本框
立刻出現了Maximum call stack size exceeded堆棧溢出異常
從而導致文本框完全沒法輸入 毫無用戶體驗！
當刷新頁面後 又是如此循環：第一個打開彈出框完全正常 第二次開始就報堆棧溢出異常了
原因
我納悶了 我的代碼中明明沒有任何遞歸調用
而在另一個組件裏 我用的是同樣的彈出框 沒有任何異常
在該組件中 我用了兩個一樣的彈出框用於登錄(彈出框內的邏輯有點複雜所以並沒有抽離複用)
那麼 是否是我用了兩個彈出框導致的
由於dialog默認是用插槽控制開關的 ：
<template v-slot:activator="{ on }">
<v-btn v-on="on">Open Dialog</v-btn>
</template>
那麼 有可能是v-slot:activator衝突了 因爲頁面中有兩個完全一樣的template
解決方法
剛好 Vuetify的官網有提供不使用激活器插槽的用法：
隨後 我抱着試一試的心態換成了該種用法(還省了一些代碼)：
<v-btn @click.stop="dialog = true">Open Dialog</v-btn>
<v-dialog v-model="dialog">
...
</v-dialog>
完美解決 控制檯一乾二淨😎：
