Élément UI Composant de la saisie semi-automatique et conflit de vérification du formulaire: comment résoudre le problème de la défaillance de la vérification du formulaire?

Solution de complétion automatique de l'interface utilisateur de l'élément pour le conflit de vérification des formulaires des composants

Lorsque vous utilisez le composant el-autocomplete de l'interface utilisateur des éléments, vous rencontrez souvent le problème de l'échec de la vérification du formulaire: même si l'utilisateur a sélectionné l'option déroulante et que la boîte d'entrée affiche la valeur correcte, le formulaire invite toujours à ne pas avoir été rempli. Cet article analyse ce problème et fournit des solutions.

Description du problème:

Le formulaire utilise el-autocomplete pour implémenter la sélection du nom d'utilisateur et utilise el-form-item et prop pour vérifier. select d' el-autocomplete lie une fonction qui gère la logique de sélection des utilisateurs. Cependant, après l'échec de l'utilisateur, la vérification du formulaire échoue toujours, invitant "veuillez saisir le nom d'utilisateur".

Exemple de code:

Code de composant:

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

Règles de vérification:

 règles: {
  Nom d'utilisateur: [{obligatoire: true, message: «Veuillez saisir le nom d'utilisateur», déclencheur: «blur»}],
  Mot de passe: [{requis: true, message: «Veuillez saisir le mot de passe», déclencheur: «blur»}]
},

Fonctions connexes:

 sélection (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.selectUserIrinfo;
},

Analyse des problèmes et solution:

La racine du problème est que l'attribution directe de this.loginform.username = params.username peut détruire le mécanisme réactif de Vue. Le système réactif de VUE s'appuie sur les modifications de données pour déclencher des mises à jour de la vue et la vérification du formulaire. Modifiez directement les propriétés de l'objet, Vue ne peut pas suivre les modifications, ce qui entraîne une vérification du formulaire qui ne peut pas être mise à jour.

Solution:

1. Assurez-vous loginform.username Réactivité: Si loginform est un objet JavaScript normal, l'affectation directe ne déclenchera pas les mises à jour réactives Vue. Mettez à jour loginform.username à l'aide de l'opérateur de méthode Vue.set ou d'extension d'objet pour s'assurer que VUE suit les changements de données.

    sélection (params) {
     this. $ set (this.loginform, 'username', params.Username); // utilise vue.set
     this.loginform.password = atoB (params.password);
   }

   ou:

    sélection (params) {
     this.logInform = {... this.logInform, nom d'utilisateur: params.Username}; // Opérateur d'extension d'objet this.logInform.Password = atoB (params.password);
   }

2. Cochez l'attribut trigger : trigger: 'blur' déclenche uniquement si la zone d'entrée perd la mise au point. Le fonctionnement de sélection d' el-autocomplete peut ne pas déclencher blur . Essayez de modifier trigger pour 'change' ou d'utiliser 'blur' et 'change' en même temps, ou sélectionner l'événement de déclenchement approprié en fonction de la situation réelle.

3. Vérifiez l'initialisation de liaison et loginform v-model : assurez-vous que les données de liaison v-model sont correctes et que l'objet loginform est correctement initialisé en tant qu'objet réactif.

Grâce aux méthodes ci-dessus, l'interface utilisateur de l'élément peut résoudre le problème du conflit entre les composants et la vérification du formulaire en remplissant automatiquement l'interface utilisateur de l'élément pour garantir la précision de la vérification du formulaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!