如果表单有隐藏字段，Vue 表单提交不起作用

Question

我的应用程序的登录表单类似于 Google 帐户登录 - 首先用户输入他们的电子邮件地址，然后他们被重定向到他们的 SSO 或显示密码字段。

在 Chromium 文档中，Google 将其称为“电子邮件首次登录流程”，recommends the following structure 以使密码管理器能够理解以下形式：

Collect the email:

<form id="login" action="login.php" method="post"> 
  <input type="text" autocomplete="username">
  <input type="submit" value="Sign In!">
</form>

Then collect the password, but include the email as the value of a hidden form field:

<style>
#emailfield {
  display: none;
}
</style>
<form id="login" action="login.php" method="post">
  <input id="emailfield" type="text" value="me@example.test" autocomplete="username">  
  <input type="password" autocomplete="current-password">
  <input type="submit" value="Sign In!">
</form>

以下是我在 Vue 中（使用 Vuetify）实现它的方法：

<template>
    <v-app id="sm-login">
        <v-container class="fill-height" fluid>
            <v-card class="mx-auto px-10 pb-9" width="450px" :loading="loading">
                <v-card-title class="justify-center pt-12">My App</v-card-title>
                <v-card-subtitle class="text-center py-6 headline">Log In</v-card-subtitle>
                <v-card-text class="text-center">
                    <v-form ref="form1" v-if="showForm === 1" @submit.prevent="lookupEmail">
                        <v-text-field
                            autocomplete="username"
                            label="Email"
                            v-model.trim="email"
                            name="email"
                            outlined
                            ref="email"
                            required
                            type="email"
                            :error-messages="errorMessage"
                            :rules="[rules.required, rules.email]" />
                    </v-form>
                    <v-form ref="form2" v-if="showForm === 2" @submit.prevent="login">
                        <input style="display:none" name="email" type="email" v-model="email" readonly autocomplete="username" />
                        <v-chip outlined class="mb-6" close @click:close="showForm = 1"><v-avatar left><v-icon>mdi-account-circle</v-icon></v-avatar> {{email}}</v-chip>
                        <v-text-field
                            label="Password"
                            v-model="password"
                            name="password"
                            outlined
                            ref="password"
                            required
                            spellcheck="false"
                            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                            :autocomplete="showPassword ? 'off' : 'current-password'"
                            :error-messages="errorMessage"
                            :type="showPassword ? 'text' : 'password'"
                            @click:append="showPassword = !showPassword"
                             />
                    </v-form>
                </v-card-text>
                <v-card-actions>
                    <v-spacer />
                    <v-btn color="primary" @click="clickButton">{{nextButton}}</v-btn>
                </v-card-actions>
            </v-card>
        </v-container>
    </v-app>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            email: '',
            password: '',
            errorMessage: '',
            showForm: 1,
            showPassword: false,
            rules: {
                required: value => !!value || Lang.get('validation-short.email'),
                email: value => {
                    const pattern = /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                    return pattern.test(value) || Lang.get('validation-short.email')
                },
            },
        };
    },
    computed: {
        nextButton() {
            switch (this.showForm) {
            case 1:
                return Lang.get('auth.next');
            case 2:
                return Lang.get('auth.log-in');
            }
        },
    },
    methods: {
        lookupEmail() {
            if (this.$refs.form1.validate()) {
                // The email lookup is done here, and either
                // redirected to SSO or set `this.showForm = 2`
            }
        },
        login() {
            if (this.$refs.form2.validate()) {
                // Login is done here
            }
        },
        clickButton() {
            switch (this.showForm) {
                case 1: return this.lookupEmail();
                case 2: return this.login();
            }
        }
    }
};

在第一个表单上按 Enter（电子邮件字段处于焦点）可以正常工作 - 它调用 lookupEmail 函数。然而，在第二个表单上按下它（密码字段处于焦点）没有任何作用。当我在第二个表单中注释掉隐藏的电子邮件字段时，Enter 键按预期提交表单（但密码管理器没有填充电子邮件地址）。

当我查看 Vue DevTools 扩展“事件”选项卡时，我看到电子邮件字段触发了两个事件，<VTextField> 上的 keydown 和 [= 上的 submit 17=]。但是，密码字段仅触发 <VTextField> 上的 keydown 事件，但 submit 事件不会出现在 DevTools 中。

为什么隐藏字段会导致表单停止捕获 submit 事件？

Answer 1

这似乎与 using v-model on hidden fields 有关。

更改代码自：

<input style="display:none" name="email" type="email" v-model="email" readonly autocomplete="username" />

至：

<input name="email" type="hidden" :value="email" autocomplete="username" />

问题似乎已解决。

请注意，这两项更改似乎都是必需的：从 display: none 切换到 type="hidden" 以及从 v-model= 切换到 :value=

如果表单有隐藏字段，Vue 表单提交不起作用

Vue form submit doesn't work if the form has a hidden field

javascript

forms

vue.js

vuetify.js