Vuetify component v-form is not responding on the declared @submit event handler

Question

I am using Vuetify and VueJS (the latest versions).

Here is the small template of 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="my@login.com"></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>

So, if you see, there is an @submit.prevent on v-form with checkLogin call and it is not working while clicking the submit buttor nor hitting the enter button while in input. Using @submit without prevent also has no effect.

But! If I put event handler on the v-btn like this:

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

after clicking the button (not hitting the enter in input fields) all works as expected.

So, can you please tell me, what am I doing wrong with the v-form submition event handling? Thank you!

Answer 1

Your submit button isn't inside the form so it's not triggering a submit event.

Either re-structure your markup or try setting an id on the form and use the form attribute on the button, eg

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

and

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

Note: The form attribute does not work for any version of Internet Explorer.