Wie verarbeite ich Formulare in Vue?

Mit der Popularität von Webanwendungen sind Formulare zu einem wichtigen Bestandteil der Benutzerinteraktion geworden. In Vue.js können wir die bereitgestellten Anweisungen und Methoden zum Verarbeiten von Formularen verwenden, was die Entwicklung komfortabler macht. In diesem Artikel wird die Verarbeitung von Formularen in Vue vorgestellt, einschließlich Formularbindung, Überprüfung, Übermittlung usw.

1. Formularbindung

Vue verwendet die V-Modell-Direktive, um eine bidirektionale Bindung von Formularfeldern und Daten zu erreichen. Wir können diese Direktive für ein Formularelement verwenden, um den Wert des Formulars an die Daten der Komponente zu binden. Wie unten gezeigt:

<template>
  <div>
    <input type="text" v-model="inputValue" placeholder="请输入...">
    <p>{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

Im obigen Code binden wir das Wertattribut des Eingabeelements an die Eingabewertdaten der Komponente und erreichen so eine bidirektionale Bindung. Wenn der Benutzer den Wert des Formulars über das Eingabefeld ändert, aktualisiert Vue automatisch die Komponentendaten. Ebenso werden Ansichten automatisch aktualisiert, wenn Komponentendaten geändert werden.

2. Überprüfung des Formulars

Vor dem Absenden des Formulars müssen wir in der Regel die Formulardaten überprüfen, um sicherzustellen, dass die Daten rechtmäßig und vollständig sind. In Vue.js können Sie auch das bereitgestellte Validierungs-Plug-in verwenden, um Formulardaten zu validieren. Unter diesen ist Vuelidate das am weitesten verbreitete Verifizierungs-Plug-in.

Vuelidate bietet eine Vielzahl von Verifizierungsregeln und -methoden, mit denen Eingabewerte im Formular überprüft werden können. Einige häufig verwendete Validierungsregeln lauten wie folgt:

• erforderlich: Der Wert muss vorhanden sein.
• minLength: Die Länge des Werts muss größer oder gleich der angegebenen Länge sein.
• maxLength: Die Länge des Werts muss kleiner oder gleich der angegebenen Länge sein.
• E-Mail: Der Wert muss in einem gültigen E-Mail-Format vorliegen.

Wir können diese Regeln auf die Werte des Formulars anwenden und sie überprüfen, bevor das Formular gesendet wird. Wie unten gezeigt:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required, minLength: minLength(6) },
    password: { required, minLength: minLength(8) }
  },
  methods: {
    submitForm() {
      if (this.$v.$invalid) {
        console.log('表单校验失败')
        return
      }
      console.log('表单校验通过')
    }
  }
}
</script>

Im obigen Code binden wir den Wert des Formularelements an die Daten der Komponente und verwenden die von Vuelidate bereitgestellten Überprüfungsregeln, um den Wert zu überprüfen. Nachdem wir die Validierungsregeln in der Validierungsoption der Komponente festgelegt haben, können wir beim Absenden des Formulars das Attribut $v aufrufen, um festzustellen, ob die Formulardaten zulässig sind. Wenn das Attribut $v.$invalid wahr ist, schlägt die Formularvalidierung fehl. Andernfalls können die Formulardaten übermittelt werden.

3. Übermittlung des Formulars

Nachdem die Formularüberprüfung erfolgreich war, müssen wir die Formulardaten zur Verarbeitung an den Server übermitteln. In Vue können wir Formulardaten über AJAX übermitteln. Der Beispielcode zum Senden von Formulardaten mithilfe der Axios-Bibliothek lautet beispielsweise wie folgt:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
        .then(response => {
          console.log('表单提交成功')
        })
        .catch(error => {
          console.log('表单提交失败')
        })
    }
  }
}
</script>

Im obigen Code verwenden wir beim Senden des Formulars die Post-Methode der Axios-Bibliothek. Diese Methode sendet eine POST-Anfrage an den Server und sendet die Formulardaten als Hauptteil der Anfrage. Nachdem die Anfrage erfolgreich war oder fehlgeschlagen ist, können wir die entsprechende Verarbeitung in der Methode then oder Catch durchführen.

Zusammenfassung

Die Verarbeitung von Formularen in Vue.js erfordert Vorgänge wie Datenbindung, Überprüfung und Übermittlung. Vue stellt V-Modell-Anweisungen und Komponentendaten zur Implementierung der Datenbindung bereit. Sie können auch Validierungs-Plug-Ins verwenden, um Formulardaten zu validieren. Nachdem die Formulardaten überprüft wurden, können wir die Formulardaten mithilfe der AJAX-Technologie zur Verarbeitung an den Server senden. Das Obige ist die Zusammenfassung dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, um die Verarbeitung von Vue-Formularen zu verstehen.

Das obige ist der detaillierte Inhalt vonWie verarbeite ich Formulare in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!