How to click the Enter key to log in directly in Vue

Vue.js is a progressive JavaScript framework for building user interfaces. As a tool, Vue.js is more flexible and can be used not only for PC websites but also for mobile application development. In many scenarios, we need to allow users to log in through a form on the page. In this article, we will introduce how to use Vue.js to implement the enter key to log in directly.

1. Basic code implementation

First, we need an input box and a login button. The sample code is as follows:

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter="login">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登录操作
    }
  }
}
</script>

Among them, v-model The command is used to bind the value of the input box in two directions, @keyup.enter event monitors the enter key, @click event monitors the mouse click, login is login function.

In the template, we bound the event of the Enter key to the input box, and simultaneously added a click event to the login button. In the enter event of the input box, the login function is directly called to complete the current login operation.

2. Prevent repeated submissions

We can use @click.prevent and @keyup.enter.prevent on the login button and enter key events Prevent multiple submissions and avoid repeated operations. As follows:

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.prevent="login">
    <button @click.prevent="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      isSubmitting: false,
    }
  },
  methods: {
    login () {
      if(this.isSubmitting) return;
      
      this.isSubmiting = true;
      // 登录操作
      
      this.isSubmitting = false;
    }
  }
}
</script>

Add a isSubmitting attribute to the data to determine whether the form is currently being submitted. Check whether this attribute is true when calling the login function. If it is true, return it directly, avoiding repeated submission of the form and ensuring a normal user experience.

3. Keyboard focus

When there are multiple input boxes in the form, we need a method to determine which input box the user is in. You can get the keyboard focus of an element using the ref attribute provided by Vue.js. As follows:

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名" ref="usernameInput">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.prevent="submit" ref="passwordInput">
    <button @click.prevent="submit">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      isSubmitting: false,
    }
  },
  methods: {
    submit () {
      if(this.isSubmitting) return;
      
      this.isSubmiting = true;
      // 登录操作
  
      this.isSubmitting = false;
    }
  },
  mounted() {
    this.$refs.usernameInput.$el.focus();
  }
}
</script>

In the mounted life cycle, we use the $refs attribute to get the DOM element of the input box, and use the focus method to Keyboard focus is set to the first input box.

4. Summary

Through the above practice, we have learned how to use Vue.js to implement the function of direct login with the enter key, and applied processing and optimization to prevent repeated submissions and keyboard focus user experience. Part of the implementation code is also given in the code example, I hope it will be helpful to you.

The above is the detailed content of How to click the Enter key to log in directly in Vue. For more information, please follow other related articles on the PHP Chinese website!