Vuetify 表单在输入时未正确提交

Question

我有一个 Vuetify 表单，我试图在输入或单击按钮时提交。我确实让这个表单在单击按钮时工作，但输入部分是现在添加它的问题。

问题是它会刷新页面，我说默认操作正在激活。我已经尝试了下面的代码，并且还在表单中添加了一个明确的操作。没运气。我怎样才能通过单击按钮或输入（如果表单有效）和运行处理我的登录的方法进行提交？

模板

<v-form ref="form" v-model="valid" lazy-validation @keyup.native.enter="submit">
   <v-text-field
    v-model="email"
    :rules="emailRules"
    label="E-mail"
    class="mt-4"
    required
    outlined
   ></v-text-field>
   <v-text-field
    v-model="password"
    :rules="passwordRules"
    label="Password"
    required
    outlined
    :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
    :type="show1 ? 'text' : 'password'"
   ></v-text-field>
   <v-btn
    :disabled="!valid"
    color="info"
    block
    class="mr-4"
    type="submit"
    @click="submit"
  >Sign In</v-btn>
 </v-form>

提交方式

submit() {
  this.$refs.form.validate();
  if (this.$refs.form.validate(true)) {
   let email = this.email
   email = email.toLowerCase()
   this.$store.dispatch('login', {
     email, 
     password: this.password
   })
 }
},

Answer 1

我只想从提交按钮中删除 type="submit"。您从中获得了不需要的提交功能。

请注意，Vuetify 处理表单中按钮默认类型的方式有所不同。如果按钮是 vuetify 元素 <v-btn>，默认类型是“按钮”，如 API docs, but the default HTML behavior for buttons inside a form is to set the type as "submit", as you can see on MDN

中所述

Answer 2

我就是这样做的

<v-form ref="form" v-model="valid" lazy-validation @submit.prevent="submit">

当您按下回车键或单击提交按钮时，将在表单中触发提交事件。 prevent 修饰符可防止页面重新加载，这是 HTML 语法中内置的。

Vuetify 表单在输入时未正确提交

Vuetify form not submiting correctly on enter

javascript

vue.js

vuetify.js