Element UI autocomplete component and form verification conflict: How to solve the problem of form verification failure?

Element UI auto-completion solution for component-form verification conflict

When using the el-autocomplete component of Element UI, you often encounter the problem of form verification failure: even if the user has selected the drop-down option and the input box displays the correct value, the form still prompts that it has not been filled in. This article analyzes this problem and provides solutions.

Problem description:

The form uses el-autocomplete component to implement username selection and uses el-form-item and prop properties to verify. select event of el-autocomplete binds a function that handles user selection logic. However, after the user selects, the form verification still fails, prompting "Please enter the user name".

Code example:

Component code:

<el-form-item label="用户名" prop="username">
  <el-autocomplete :fetch-suggestions="querysearch" class="usernameinput" placeholder="选择或输入用户名" v-model="selectuserinfo">
  </el-autocomplete>
</el-form-item>

Verification rules:

 rules: {
  username: [{ required: true, message: 'Please enter the username', trigger: 'blur' }],
  password: [{ required: true, message: 'Please enter password', trigger: 'blur' }]
},

Related functions:

 selection(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;
},

Problem analysis and solution:

The root of the problem is that directly assigning this.loginform.username = params.username may destroy Vue's responsive mechanism. Vue's responsive system relies on data changes to trigger view updates and form verification. Directly modify the object properties, Vue cannot track changes, resulting in form verification that cannot be updated.

Solution:

1. Ensure loginform.username responsiveness: If loginform is a normal JavaScript object, direct assignment will not trigger Vue responsive updates. Update loginform.username using the Vue.set method or object expansion operator to ensure that Vue tracks data changes.

    selection(params) {
     this.$set(this.loginform, 'username', params.username); // Use Vue.set
     this.loginform.password = atob(params.password);
   }

   or:

    selection(params) {
     this.loginForm = { ...this.loginForm, username: params.username }; // Object expansion operator this.loginForm.password = atob(params.password);
   }

2. Check trigger attribute: trigger: 'blur' triggers only if the input box loses focus. The selection operation of el-autocomplete may not trigger blur event. Try modifying trigger attribute to 'change' or using 'blur' and 'change' at the same time, or selecting the appropriate trigger event based on the actual situation.

3. Check v-model binding and loginform initialization: Make sure that v-model binding data is correct and that loginform object is correctly initialized as a responsive object.

Through the above methods, the Element UI can solve the problem of conflict between components and form verification by automatically completing the Element UI to ensure the accuracy of form verification.

The above is the detailed content of Element UI autocomplete component and form verification conflict: How to solve the problem of form verification failure?. For more information, please follow other related articles on the PHP Chinese website!