Vuetify组件v-form对声明的@submit事件处理程序没有响应

Question

我正在使用Vuetify和VueJS(最新版本).

这是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>

因此,如果你看到,v-form上有一个带有checkLogin调用的@ submit.prevent,它在点击提交按钮时没有工作,也没有在输入时按下回车按钮.在没有阻止的情况下使用@submit也没有任何效果.

但!如果我在v-btn上放置事件处理程序,如下所示:

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

单击按钮(未按输入字段中的输入)后,所有工作都按预期工作.

那么,请你告诉我,v-form submition事件处理我做错了什么？谢谢!

Answer 1

您的提交按钮不在表单内,因此它不会触发提交事件.

重新构建标记或尝试id在表单上设置并使用form按钮上的属性,例如

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

和

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