Erfahren Sie, wie Sie Textfelder zur positiven Validierung und zum Senden von Daten verwenden

Question

Ich habe ein v-text-field mit Validierungsregeln, die etwas auslösen, wenn der Fokus verloren geht.

<v-text-field
    :rules="validationRules"
    @blur="emitFunction"
></v-text-field>

Gibt es eine Möglichkeit, emitFunction nur dann aufzurufen, wenn die Validierung erfolgreich ist?

Answer 1

你可以使用v-form将其包裹起来，并使用v-model来跟踪表单的有效性

const isValid = ref(false)
function emitIfValid() {
  if (isValid.value) emitFunction()
}

<v-form v-model="isValid">
  <v-text-field
    :rules="validationRules"
    @blur="emitIfValid"
  />
</v-form>