問題描述

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

解決辦法

嘗試一（不推薦）

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

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

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

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

嘗試二（推薦）

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

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

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

但是問題依舊存在。

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

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

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

總結(jié)

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

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

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

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

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

最新評(píng)論