web-dev-qa-db-fra.com

Le composant V-form du composant Vuetify ne répond pas sur le gestionnaire d'événements @submit déclaré

J'utilise Vuetify et VueJS (les dernières versions).

Voici le petit modèle de Login.vue:

<template>
  <v-layout align-center justify-center>
    <v-flex xs12 sm8 md4>
      <v-card class="elevation-12">
        <v-toolbar dark color="success">
          <v-toolbar-title>Login form</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <v-card-text>
          <v-form @submit.prevent="checkLogin">
            <v-text-field prepend-icon="person" id="userLogin" v-model="userLogin" placeholder="[email protected]"></v-text-field>
            <v-text-field prepend-icon="lock" id="userPassword" v-model="userPassword" placeholder="password" type="password"></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <!-- TODO fix the bug when form.submit not works -->
          <v-btn type="submit" color="success">Login</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</template>

Donc, si vous voyez, il y a un @ submit.prevent sur v-form avec checkLogin appel et cela ne fonctionne pas en cliquant sur le bouton de soumission ni en appuyant sur le bouton Entrée en entrée. L'utilisation de @ submit sans empêche n'a également aucun effet.

Mais! Si je mets le gestionnaire d'événements sur le v-btn comme ceci:

<v-btn @click.native="checkLogin">

après avoir cliqué sur le bouton (sans appuyer sur la touche Entrée dans les champs de saisie), tout fonctionne comme prévu.

Alors, pouvez-vous me dire ce que je fais de mal avec la gestion des événements de soumission v-form ? Je vous remercie!

vue.jsvuetify.js
9
Clark

Votre bouton d'envoi n'est pas à l'intérieur du formulaire, il ne déclenche donc pas d'événement d'envoi .

Soit restructurez votre balisage, soit essayez de définir un id sur le formulaire et utilisez l'attribut form sur le bouton , par exemple

<v-form @submit.prevent="checkLogin" id="check-login-form">

et

<v-btn type="submit" color="success" form="check-login-form">Login</v-btn>

Remarque: l'attribut form ne fonctionne pas pour toute version d'Internet Explorer .

20
Phil