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 上有一个 @submit.prevent 和 checkLogin 调用，在输入时单击提交按钮或按回车按钮时它不起作用。在没有 prevent 的情况下使用 @submit 也没有效果。

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

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

单击按钮（未在输入字段中输入）后，一切正常。

所以，你能告诉我，我在处理 v-form 提交事件时做错了什么吗？谢谢！

Answer 1

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

re-structure 您的标记或尝试在表单上设置 id 并使用 form attribute on the button，例如

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

和

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

注意：form 属性不适用于 any version of Internet Explorer。

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

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

vue.js

vuetify.js