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

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)重要,并且避免冗余的代碼。

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊14 分享