av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術文章
文章詳情頁

快速解決Vue、element-ui的resetFields()方法重置表單無效的問題

瀏覽:133日期:2022-12-09 14:23:51

問題:

使用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- 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()方法重置表單無效的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 国产精品美女久久久久aⅴ国产馆 | 免费在线观看av网站 | 国产精品免费一区二区三区 | 久久精品小视频 | 国产精品久久久久久久7777 | 91麻豆精品国产91久久久更新资源速度超快 | 狠狠av| 国产一区二区三区在线 | 国产成人一区二区三区电影 | 精品国产一区探花在线观看 | 成人免费在线 | 成人动漫一区二区 | 免费一区| 自拍偷拍第1页 | av在线电影网站 | 欧洲一区二区三区 | 精品视频一区二区三区在线观看 | 久久精品国产一区老色匹 | 亚洲欧美网站 | 日韩中文一区二区 | 超碰网址 | 日本不卡一区 | 日韩成人免费视频 | 亚洲97| 欧美三级视频 | 精品国产免费一区二区三区五区 | 久久久精彩视频 | 日韩免费av | 99视频网 | 国产色 | 一级美国黄色片 | 天堂资源| 亚洲97| 日韩另类| 国产福利免费视频 | 久久男人 | 日本一区不卡 | 黄色片免费在线观看 | 色爱综合网 | 日韩欧美视频 | 在线视频一区二区三区 |