Vue.js Vuetify组件v-form在声明的@submit事件处理程序上没有响应

我正在使用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按钮或按下enter按钮时，它都不起作用。使用@submit而不使用prevent也没有效果

但是！如果我像这样在v-btn上放置事件处理程序：

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

单击按钮（不点击输入字段中的enter）后，所有操作均按预期进行

那么，您能告诉我，我在处理v-form提交事件方面有什么错吗？

---

谢谢大家!

您的提交按钮不在表单中，因此它不会触发提交事件

重新构造标记或尝试在表单上设置

id

，并使用

及

登录

---

注意：

form

属性不适用于。

Btw，

type=“submit”

实际上不需要，按钮

type

属性默认有一个

submit

值。@mcmimik我总是喜欢显式设置按钮

type

。当您想要一个普通的提交按钮时，它有助于避免任何混乱或意外创建提交按钮。另外，我只是在复制OP的按钮代码实际上，

v-btn

必须有它的

type=“submit”

规范才能用作提交按钮。默认情况下，

v-btn

的类型为“按钮”。

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

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