溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue、element-ui的resetFields()方法重置表單無效怎么辦，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
問題：
使用this.$ref['form'] .resetFields()無法重置表單項
原因：
1.沒有給表單添加ref屬性
<el-form ref="form"></el-form>
2.表單項el-form-item沒有添加prop屬性，prop屬性需要與input框綁定的屬性一致
<el-form ref="form" :model="sizeForm" label-width="80px" size="mini"> <el-form-item label="活動名稱" prop="name"> <el-input v-model="sizeForm.name"></el-input> </el-form-item> </el-form>
3.還有一個經常出現這種問題的場景是，當使用vuex的時候，新建表單與編輯表單復用，此時上述屬性跟方法都添加了也無法達到清除表單的效果。
此時我們再重新看一下element-ui的官方文檔
| 方法名 | 說明 |
|---|---|
| resetField | 對該表單項進行重置，將其值重置為初始值并移除校驗結果 |
| clearValidate | 移除該表單項的校驗結果 |
重點：resetField()方法不是將表單重置為空，而是重置為初始值
所以當我們打開新建表單的時候，表單項綁定的屬性值為空，在提交表單后，表單項綁定的值不為空，此時再打開新建表單是會有上一次的值出現，此時resetField()方法是無法清空表單的，因為在這次操作的時候，屬性初始值就不為空。
解決方法：
在提交表單成功后對綁定的值進行方法重置
// 重置表單項屬性
resetForm () {
return {
remark: '',
name: ''
}
}
// 提交表單成功后重新給屬性賦值
submit () {
//......調用成功
let self = this
let query = self.resetForm()
self.updateForm({ //此方法是自定義的vuex的action方法，大家可根據實際應用場景定義重置表單方法
form: query
)}
self.$ref['form'].resetFields() // 此時再調用resetFields()方法是為了清除表單驗證而出現的錯誤
}在對屬性進行重置后執行resetFields方法，是因為對屬性重置為空時，可能會觸發表單規則的驗證，此時執行resetFields會移除校驗結果
補充知識：vue+element-ui this.$refs[‘‘].resetFields() 重置表單數據不生效問題
element 的 Form 組件提供了表單驗證的功能，需要通過 rules 屬性傳入約定的驗證規則，并將 Form-Item 的 prop 屬性設置為需校驗的字段名。
有兩點需要注意：
1.要有對應的 ref，且名字一致，表明重置哪個表單。
2.prop 設置的字段名要和 v-model 綁定的字段名一致，否則重置表單或進行自定義校驗規則時不會生效。
僅使用重置功能時具體校驗規則不必填，但要重置的字段一定要有對應的 prop。
感謝你能夠認真閱讀完這篇文章，希望小編分享Vue、element-ui的resetFields()方法重置表單無效怎么辦內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
