使用 Enter 按钮提交 Vuetify 表单答案

【问题标题】：Submit Vuetify form with the enter button使用 Enter 按钮提交 Vuetify 表单
【发布时间】：2020-10-20 00:13:13
【问题描述】：

以为这会是直截了当的，但事实并非如此。使用 vuetify 表单如何将表单绑定到 enter 按钮，以便使用 enter 按钮调用它的提交功能？

【问题讨论】：

【解决方案1】：

我会在我发布问题后立即找到解决方法。我在这里找到了答案：

https://github.com/vuetifyjs/vuetify/issues/1545

基本上，我必须向组件添加一个事件侦听器，以将 Enter 按键附加到我的身份验证方法。这是问题中的组件：

<template>
  <v-card>
    <v-card-title>
      <span class="headline">Login</span>
    </v-card-title>
    <v-form v-model="isValid">
      <v-card-text>
        <v-container>
          <v-row>
            <v-col cols="12">
              <v-text-field
                v-model="username"
                label="User Name"
                prepend-icon="mdi-account circle"
                :rules="userNameRequired"
                required
              ></v-text-field>
            </v-col>
            <v-col cols="12">
              <v-text-field
                v-model="password"
                label="Password"
                :type="showPassword ? 'text' : 'password'"
                prepend-icon="mdi-lock"
                :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                @click:append="showPassword = !showPassword"
                :rules="passwordRequired"
                required
              ></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" text @click="close"> Close </v-btn>
        <v-btn color="blue darken-1" text @click="authenticate" :disabled="!isValid">
          Login
        </v-btn>
      </v-card-actions>
    </v-form>
  </v-card>
</template>

<script>
import { authenticationService } from "../services/authenticationService/authentication.service";
import User from "../models/user";

export default {
  name: "LoginForm",
  props: ["userForAuthentication"],
  data: () => ({
    username: "",
    password: "",
    user: {},
    isValid: true,
    showPassword: false,
    userNameRequired: [(v) => !!v || "User Name is required"],
    passwordRequired: [(v) => !!v || "Password is required"],
  }),
  methods: {
    async authenticate() {
      try {
        const response = await authenticationService.authenticateUser(
          this.$data.username,
          this.$data.password
        );

        if (response.status === 200) {
          this.$data.user.shallowClone(response.data.user);

          await this.resetData();

          this.$emit(
            "user-logging-in-event",
            this.$data.user,
            response.data.token
          );

          this.$toasted.success(`${this.$data.user.fullName} is logged in.`, {
            duration: 3000,
          });
        } else if (response.status === 400) {
          this.$toasted.error("Username or Password is incorrect.", {
            duration: 3000,
          });
        } else {
          this.$toasted.error(
            "An error occurred while trying to authenticate the user",
            {
              duration: 3000,
            }
          );
        }
      } catch (error) {
        this.$toasted.error(error, {
          duration: 3000,
        });
      }
    },

    close() {
      this.$emit("user-logging-in-event", null, null);
    },

    async resetData() {
      this.$data.username = "";
      this.$data.password = "";
    },
  },
  mounted() {
    let self = this;

    window.addEventListener("keyup", function (event) {
      if (event.keyCode === 13) {
        self.authenticate();
      }
    });

    this.$data.user = new User();
    this.$data.user.shallowClone(this.$props.userForAuthentication);
  },
};
</script>

【讨论】：

在您的链接上可以找到答案，但在您发布的代码上却找不到。对于任何寻找您的人，您都可以：<v-form @keyup.native.enter="submit">...</v-form> 或验证<v-form v-model="valid" @keyup.native.enter="valid && submit($event)">...</v-form>
答案在我的代码中......它在挂载的生命周期钩子中。