問題描述

由于我將編輯與新增時，表單使用的是同一個data中的數(shù)據(jù)，這就導(dǎo)致出現(xiàn)了我點擊了編輯后，再次點擊新增時，出現(xiàn)了數(shù)據(jù)依舊是剛才編輯表單中的數(shù)據(jù)。

解決辦法

嘗試一（不推薦）

通過 手動給表單中的字段賦值 ，期初時，能達到清除表單的效果，但是又出現(xiàn)了新的問題。表單驗證不通過。在一打開對話框時，就默認觸發(fā)了表單的驗證規(guī)則。

查閱Element-UI官方文檔，可以發(fā)現(xiàn)有有清除驗證的方法 clearValidate 。

只需將該方法寫上，即可。

if (this.$refs.studentInfoRef) {
        this.$nextTick(() => {
          this.$refs.studentInfoRef.clearValidate();
        });
      }

嘗試二（推薦）

查閱Element-UI官方文檔可以發(fā)現(xiàn)，官方提供了一個重置表單的 resetFields() 方法。

但發(fā)現(xiàn)調(diào)用Element-UI官方提供的 resetFields() 方法并未生效。甚至還出現(xiàn)了以下錯誤 Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'resetFields')" 。不急，有解決辦法。

出現(xiàn)上述情況，嘗試用網(wǎng)絡(luò)上普遍認為的錯誤（很可能是起作用的生命周期不一致）解決辦法來解決。這時我們先將調(diào)用這個方法放到 this.$nextTick 中。

但是問題依舊存在。

閱讀這個問題，可以知道，說的是這個未定義。好吧，可能還是生效的時間不對，那我就加一個條件判斷，讓這個存在時在去執(zhí)行。

if (this.$refs.studentInfoRef) {
        this.$nextTick(() => {
          this.$refs.studentInfoRef.resetFields();
        });
      }

發(fā)現(xiàn)問題得到了解決。這時有可能是瀏覽器緩存的問題，還需要做的操作是需要再表單上添加 @close 方法。在關(guān)閉時清除清除表單，在打開時清除表單驗證，這個比較靠譜的一個解決辦法。

總結(jié)

在使用Element-UI重置表單的方式時，一定要記住，表單中的prop屬性不要漏掉。

在查看方法使用時，并未提到prop這個屬性，但繼續(xù)往下閱讀文檔，就會發(fā)現(xiàn)，這個屬性是必須的。

注意prop屬性值需要與model中的值一致。

注意： 在 this.$refs.studentInfoRef.resetFields(); 這一句話中， studentInfoRef 需要與表單中的ref一致，且不能去其他的ref重名。

到此這篇關(guān)于Element-UI清空表單及驗證不生效的問題解決的文章就介紹到這了,更多相關(guān)Element清空表單及驗證不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論