Element UI Autokomponente und Form -Überprüfungskonflikt: Wie löst man das Problem des Versagens der Form des Formularverifizierung?

Element UI Auto-Completion-Lösung für Bestätigungskonflikte zur Komponentenform

Bei der Verwendung der el-autocomplete der Element UI stoßen Sie häufig auf das Problem des Formulars des Formularverifizierungsfehlers: Selbst wenn der Benutzer die Dropdown-Option ausgewählt hat und das Eingabefeld den richtigen Wert anzeigt, fordert das Formular weiterhin auf, dass er nicht ausgefüllt wurde. Dieser Artikel analysiert dieses Problem und liefert Lösungen.

Problembeschreibung:

Das Formular verwendet el-autocomplete -Komponente, um die Auswahl der Benutzernamen zu implementieren und el-form-item und prop Eigenschaften zu überprüfen. select Auswahlereignis von el-autocomplete verbindet eine Funktion, die die Benutzerauswahllogik übernimmt. Nachdem der Benutzer ausgewählt wurde, schlägt die Formularüberprüfung immer noch fehl und fordert "Bitte den Benutzernamen ein."

Codebeispiel:

Komponentencode:

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

Überprüfungsregeln:

 Regeln: {
  Benutzername: [{Erforderlich: True, Nachricht: 'Bitte geben Sie den Benutzernamen ein, Trigger:' Blur '}],
  Passwort: [{Erforderlich: True, Meldung: 'Bitte geben Sie Passwort ein, Trigger:' Blur '}]
},

Verwandte Funktionen:

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

Problemanalyse und Lösung:

Die Wurzel des Problems ist, dass die direkte Zuordnung this.loginform.username = params.username den reaktionsschnellen Mechanismus von Vues zerstören kann. Das Responsive System von VUE basiert auf Datenänderungen, um die Aktualisierungen der Ansicht und die Form zur Form zu verifizieren. Ändern Sie direkt die Objekteigenschaften, Vue kann keine Änderungen verfolgen, was zu einer Formularüberprüfung führt, die nicht aktualisiert werden kann.

Lösung:

1. Stellen Sie sicher, dass loginform.username Reaktionsfähigkeit: Wenn loginform ein normales JavaScript -Objekt ist, löst die direkte Zuordnung keine reaktionsschnellen Aktualisierungen aus. Aktualisieren Sie loginform.username mit der Vue.set -Methode oder dem Objektexpansionsoperator, um sicherzustellen, dass VUE -Datenänderungen verfolgt.

    Auswahl (Params) {
     Dies. $ set (this.loginform, 'userername', params.username); // Verwenden Sie Vue.set
     this.loginform.password = atOB (params.Password);
   }

   oder:

    Auswahl (Params) {
     this.loginform = {... this.loginform, Benutzername: params.username}; // Objektausdehnungsoperator this.loginform.Password = ATOB (params.Password);
   }

2. Überprüfen Sie das trigger : trigger: 'blur' Trigger nur, wenn das Eingabefeld den Fokus verliert. Der Auswahlbetrieb von el-autocomplete kann blur möglicherweise nicht auslösen. Versuchen Sie, trigger Triggerattribut so zu ändern, dass sie gleichzeitig "Blur 'change' und "Änderung" verwendet oder 'blur' und 'change' verwendet oder das entsprechende Triggerereignis basierend auf der tatsächlichen Situation auswählen.

3. Überprüfen Sie v-model -Bindung und die loginform : Stellen Sie sicher, dass v-model -Bindungsdaten korrekt sind und dass loginform als reaktionsschnelles Objekt korrekt initialisiert wird.

Durch die oben genannten Methoden kann die Element -Benutzeroberfläche das Problem des Konflikts zwischen Komponenten und Form -Überprüfung lösen, indem die Element -Benutzeroberfläche automatisch vervollständigt wird, um die Genauigkeit der Form der Form zu gewährleisten.

Das obige ist der detaillierte Inhalt vonElement UI Autokomponente und Form -Überprüfungskonflikt: Wie löst man das Problem des Versagens der Form des Formularverifizierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!