Element UI自動(dòng)完成組件與表單校驗(yàn)沖突：如何解決表單校驗(yàn)失敗的問題？

Element ui自動(dòng)完成組件與表單校驗(yàn)沖突的解決方案

在使用Element UI的el-autocomplete組件時(shí)，經(jīng)常會(huì)遇到表單校驗(yàn)失敗的問題：即使用戶已選擇下拉選項(xiàng)，輸入框顯示正確值，表單仍提示未填寫。本文分析此問題并提供解決方案。

問題描述：

表單使用el-autocomplete組件實(shí)現(xiàn)用戶名選擇，并用el-form-item和prop屬性進(jìn)行校驗(yàn)。el-autocomplete的select事件綁定了處理用戶選擇邏輯的函數(shù)。然而，用戶選擇后，表單校驗(yàn)仍失敗，提示“請(qǐng)輸入用戶名”。

代碼示例：

組件代碼：

<el-form-item label="用戶名" prop="username">   <el-autocomplete      :fetch-suggestions="querysearch"      class="usernameinput"      placeholder="選擇或輸入用戶名"      v-model="selectuserinfo">   </el-autocomplete> </el-form-item>

校驗(yàn)規(guī)則：

rules: {   username: [{ required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur' }],   password: [{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' }] },

相關(guān)函數(shù)：

selectoption(params) {   console.log(this.selectuserinfo);   this.loginform.username = params.username;   this.loginform.password = atob(params.password); }, onblur() {   console.log('blur');   console.log(this.loginform.username, this.selectuserinfo);   this.loginform.username = this.selectuserinfo; },

問題分析與解決方法：

問題根源在于直接賦值this.loginform.username = params.username可能破壞vue的響應(yīng)式機(jī)制。Vue的響應(yīng)式系統(tǒng)依賴數(shù)據(jù)變化觸發(fā)視圖更新和表單校驗(yàn)。直接修改對(duì)象屬性，Vue無法追蹤變化，導(dǎo)致表單校驗(yàn)無法更新。

解決方案：

1. 確保loginform.username響應(yīng)式： 如果loginform是普通JavaScript對(duì)象，直接賦值不會(huì)觸發(fā)Vue響應(yīng)式更新。使用Vue.set方法或?qū)ο笳归_運(yùn)算符更新loginform.username，確保Vue追蹤數(shù)據(jù)變化。

   selectoption(params) {   this.$set(this.loginform, 'username', params.username); // 使用 Vue.set   this.loginform.password = atob(params.password); }

   或：

   selectoption(params) {   this.loginForm = { ...this.loginForm, username: params.username }; // 對(duì)象展開運(yùn)算符   this.loginForm.password = atob(params.password); }

2. 檢查trigger屬性： trigger: ‘blur’僅在輸入框失去焦點(diǎn)時(shí)觸發(fā)校驗(yàn)。el-autocomplete的選擇操作可能不會(huì)觸發(fā)blur事件。嘗試將trigger屬性修改為’change’或同時(shí)使用’blur’和’change’，或根據(jù)實(shí)際情況選擇合適的觸發(fā)事件。

3. 檢查v-model綁定和loginform初始化： 確保v-model綁定數(shù)據(jù)正確，且loginform對(duì)象正確初始化為響應(yīng)式對(duì)象。

通過以上方法，即可解決Element UI自動(dòng)完成組件與表單校驗(yàn)沖突的問題，確保表單校驗(yàn)的準(zhǔn)確性。