我正在使用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>
在在输入中单击提交键或按Enter按钮。使用 @submit 没有预防也没有效果。
但是!如果我将事件处理程序放在 v-btn 上,则是这样的:
<v-btn @click.native="checkLogin">
单击按钮(未在输入字段中击中Enter(之后,都按预期工作。
那么,您能告诉我,我在 v-form 提交事件处理中做错了什么?谢谢!
您的提交按钮不在表单内部,因此它不会触发a 提交事件。
重新结构标记或尝试在表单上设置id
,然后在按钮上使用form
属性,例如
<v-form @submit.prevent="checkLogin" id="check-login-form">
和
<v-btn type="submit" color="success" form="check-login-form">Login</v-btn>
注意:form
属性对任何版本的Internet Explorer不起作用。