Element UI Autocomplete組件表單校驗(yàn)失敗：如何解決v-model與trigger沖突？

Element ui Autocomplete組件與表單校驗(yàn)沖突：高效解決方法

在使用Element UI構(gòu)建表單時(shí)，Autocomplete組件的自動(dòng)補(bǔ)全功能非常實(shí)用。然而，一些開發(fā)者可能會(huì)遇到Autocomplete組件選項(xiàng)選擇后，表單校驗(yàn)仍然失敗的問題，即使輸入框已顯示正確結(jié)果。本文將深入分析此問題，并提供有效的解決方案。

問題描述：

在表單中使用el-autocomplete組件并設(shè)置校驗(yàn)規(guī)則后，預(yù)期行為是：選擇Autocomplete建議選項(xiàng)后，表單校驗(yàn)應(yīng)通過(guò)。但實(shí)際情況是，即使選擇了正確的選項(xiàng)，校驗(yàn)仍然失敗。

代碼示例：

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

rules: {   username: [{ required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur' }],   password: [{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' }] },  selectOption(params) {   this.loginForm.username = params.username; // 問題可能在此處   this.loginForm.password = atob(params.password); },  onBlur() {   this.loginForm.username = this.selectuserinfo; // 冗余代碼，可能導(dǎo)致沖突 },

問題分析與解決方案：

問題根源在于v-model的數(shù)據(jù)綁定和表單校驗(yàn)觸發(fā)事件trigger之間的沖突。

1. 直接賦值破壞響應(yīng)式: this.loginForm.username = params.username 直接修改loginForm對(duì)象屬性，可能繞過(guò)了vue的響應(yīng)式系統(tǒng)。Vue的響應(yīng)式系統(tǒng)依賴數(shù)據(jù)變化觸發(fā)視圖更新和表單校驗(yàn)。直接賦值不會(huì)觸發(fā)響應(yīng)式更新，導(dǎo)致校驗(yàn)無(wú)法感知username屬性的改變。

   解決方案： 使用this.$set(this.loginForm, ‘username’, params.username) 或 Vue.set(this.loginForm, ‘username’, params.username)來(lái)更新username值，確保響應(yīng)式機(jī)制正常工作。

2. trigger: ‘blur’ 事件不匹配: trigger: ‘blur’ 指定校驗(yàn)觸發(fā)事件為blur事件，但Autocomplete組件的選擇操作可能不會(huì)觸發(fā)blur事件。

   解決方案： 將trigger修改為’change’或’input’，或同時(shí)設(shè)置多個(gè)觸發(fā)事件，例如trigger: [‘blur’, ‘change’]。選擇合適的觸發(fā)事件取決于Autocomplete組件的事件機(jī)制。 建議優(yōu)先嘗試’change’。

3. 冗余代碼沖突: onBlur方法中的賦值語(yǔ)句this.loginForm.username = this.selectuserinfo可能與selectOption方法沖突，導(dǎo)致數(shù)據(jù)不一致。

   解決方案： 刪除onBlur方法中的賦值語(yǔ)句。

改進(jìn)后的代碼：

rules: {   username: [{ required: true, message: '請(qǐng)輸入用戶名', trigger: 'change' }], // 修改trigger為change   password: [{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' }] },  selectOption(params) {   this.$set(this.loginForm, 'username', params.username); // 使用$set方法更新數(shù)據(jù)   this.loginForm.password = atob(params.password); },  // 刪除onBlur方法

通過(guò)以上方法，確保username屬性的改變被Vue響應(yīng)式系統(tǒng)正確捕獲，并且表單校驗(yàn)規(guī)則被正確的事件觸發(fā)，從而有效解決Element UI Autocomplete組件選擇后表單校驗(yàn)失敗的問題。 記住，選擇合適的trigger事件至關(guān)重要，并且避免冗余的代碼。