resetFields()不生效的原因

編輯用戶(hù)

新增用戶(hù)

點(diǎn)擊編輯的時(shí)候，數(shù)據(jù)回顯，沒(méi)問(wèn)題：

點(diǎn)擊取消，會(huì)調(diào)用方法

按理說(shuō)應(yīng)該會(huì)把表單清空。但是我們?cè)冱c(diǎn)擊新增的時(shí)候，數(shù)據(jù)并沒(méi)有被清空：

原因：

點(diǎn)擊編輯的時(shí)候，一旦執(zhí)行showModal.value = true， 就顯示dialog，然后立馬就執(zhí)行Object.assign(userForm, row)

此時(shí)數(shù)據(jù)修改了，但是dialog里面的el-form還沒(méi)有mounted，也就是說(shuō)，數(shù)據(jù)是在form表單mounted之前修改的，那么這個(gè)修改后的數(shù)據(jù)就成為了form表單的初始值。

而重點(diǎn)是，resetFields方法是用來(lái)把表單重置到初始值的，現(xiàn)在初始值都修改成回顯數(shù)據(jù)了，再怎么調(diào)用resetFields都是徒勞

解決方案：

只要在 form 表單 mounted之后再進(jìn)行賦值操作這樣就可以完美解決問(wèn)題了。

el-form中設(shè)置resetFields方法不生效問(wèn)題

el-form中設(shè)置resetFields方法不生效 前置知識(shí)點(diǎn)問(wèn)題描述問(wèn)題代碼定位問(wèn)題使用排除法 問(wèn)題分析解決辦法show you code分析

前置知識(shí)點(diǎn)

• Event loop
• 宏任務(wù)與微任務(wù)

問(wèn)題描述

第一次訪問(wèn)頁(yè)面，先進(jìn)行查看、編輯動(dòng)作，操作結(jié)束退出el-dialog時(shí)，el-form綁定的數(shù)據(jù)與校驗(yàn)信息均無(wú)法置空，且后續(xù)每次退出時(shí)不帶值進(jìn)入，el-form初始值始終為第一次訪問(wèn)頁(yè)面的值，且非刷新頁(yè)面無(wú)效。

問(wèn)題代碼

// 彈窗
 <el-dialog :visible.sync="dialogShow">
    <el-form ref="refForm" :model="form">
       <el-form-item label="標(biāo)題" prop="name">
         <el-input v-model="form.name"></el-input>
       </el-form-item>
     </el-form>
 </el-dialog>

// 重置表單信息
 resetForm() {
   this.dialogShow = false;
   this.$refs.refForm.resetFields();
 },
 
// 查看行元素   
skipBtn(row) {
   this.dialogShow = true;
   this.form = JSON.parse(JSON.stringify(row));
},

定位問(wèn)題

使用排除法

• 表單上沒(méi)有添加ref屬性？
• el-form-item沒(méi)有添加prop屬性？

可以看到代碼里都有體現(xiàn)，排除代碼編寫(xiě)問(wèn)題，去查看文檔，嘗試定位是組件在初始渲染過(guò)程中保留的初始值問(wèn)題。

問(wèn)題分析

在頁(yè)面初始化過(guò)程中，若直接對(duì)form賦值, 即

this.form = JSON.parse(JSON.stringify(row));

由于Dialog未渲染完畢， 初始值將為第一次對(duì)form賦值結(jié)果而非空值。

解決辦法

知道了問(wèn)題所在，問(wèn)題就解決一半了，不多說(shuō)

show you code

// 查看行元素   
skipBtn(row) {
   this.dialogShow = true;
   this.$nextTick(() => {
   		this.form = JSON.parse(JSON.stringify(row));
   }
},

分析

由于Dialog未渲染完畢，才導(dǎo)致初始值將為第一次對(duì)form賦值結(jié)果而非空值，那么只需在Dialog渲染結(jié)束后才給form賦值就OK了。

這里添加$nextTick，就將賦值過(guò)程移出同步任務(wù)隊(duì)列放到微任務(wù)隊(duì)列，當(dāng)Dialog 渲染完畢后才進(jìn)行賦值，完美的解決了問(wèn)題。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論