Vue、element-ui的resetFields()方法重置表單無(wú)效怎么辦

這篇文章主要介紹了Vue、element-ui的resetFields()方法重置表單無(wú)效怎么辦，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

問(wèn)題：

使用this.$ref['form'] .resetFields()無(wú)法重置表單項(xiàng)

原因：

1.沒(méi)有給表單添加ref屬性

<el-form ref="form"></el-form>

2.表單項(xiàng)el-form-item沒(méi)有添加prop屬性，prop屬性需要與input框綁定的屬性一致

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
 <el-form-item label="活動(dòng)名稱" prop="name">
  <el-input v-model="sizeForm.name"></el-input>
 </el-form-item>
</el-form>

3.還有一個(gè)經(jīng)常出現(xiàn)這種問(wèn)題的場(chǎng)景是，當(dāng)使用vuex的時(shí)候，新建表單與編輯表單復(fù)用，此時(shí)上述屬性跟方法都添加了也無(wú)法達(dá)到清除表單的效果。

此時(shí)我們?cè)僦匦驴匆幌耬lement-ui的官方文檔

重點(diǎn)：resetField()方法不是將表單重置為空，而是重置為初始值

所以當(dāng)我們打開(kāi)新建表單的時(shí)候，表單項(xiàng)綁定的屬性值為空，在提交表單后，表單項(xiàng)綁定的值不為空，此時(shí)再打開(kāi)新建表單是會(huì)有上一次的值出現(xiàn)，此時(shí)resetField()方法是無(wú)法清空表單的，因?yàn)樵谶@次操作的時(shí)候，屬性初始值就不為空。

解決方法：

在提交表單成功后對(duì)綁定的值進(jìn)行方法重置

//  重置表單項(xiàng)屬性
resetForm () {
  return {
    remark: '',
    name: ''
  }
}
 
//  提交表單成功后重新給屬性賦值
submit () {
  //......調(diào)用成功
  let self = this
  let query = self.resetForm()
  self.updateForm({ //此方法是自定義的vuex的action方法，大家可根據(jù)實(shí)際應(yīng)用場(chǎng)景定義重置表單方法
    form: query
  )}
  self.$ref['form'].resetFields()  // 此時(shí)再調(diào)用resetFields()方法是為了清除表單驗(yàn)證而出現(xiàn)的錯(cuò)誤
}

在對(duì)屬性進(jìn)行重置后執(zhí)行resetFields方法，是因?yàn)閷?duì)屬性重置為空時(shí)，可能會(huì)觸發(fā)表單規(guī)則的驗(yàn)證，此時(shí)執(zhí)行resetFields會(huì)移除校驗(yàn)結(jié)果

補(bǔ)充知識(shí)：vue+element-ui this.$refs[‘‘].resetFields() 重置表單數(shù)據(jù)不生效問(wèn)題

element 的 Form 組件提供了表單驗(yàn)證的功能，需要通過(guò) rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名。

有兩點(diǎn)需要注意：

1.要有對(duì)應(yīng)的 ref，且名字一致，表明重置哪個(gè)表單。

2.prop 設(shè)置的字段名要和 v-model 綁定的字段名一致，否則重置表單或進(jìn)行自定義校驗(yàn)規(guī)則時(shí)不會(huì)生效。

僅使用重置功能時(shí)具體校驗(yàn)規(guī)則不必填，但要重置的字段一定要有對(duì)應(yīng)的 prop。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享Vue、element-ui的resetFields()方法重置表單無(wú)效怎么辦內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!