vue.js - 登录表单中的“记住我”复选框(Remember Me Checkbox in Login Form)

Question

I have a Login form with 2 fields in my Login Component.

(我的登录组件中有一个包含2个字段的登录表单。)

I also have a remember me checkbox.

(我还有一个“记住我”复选框。)

How can I make it functional when the checkbox is checked.

(选中复选框后，如何使它起作用。)

It will remember the email and password.

(它将记住电子邮件和密码。)

<form>

<div class="form-group-custom">
<label for="name">your email</label>
<div class="form-input-outer">
<input type="email" class="from-input" placeholder="Enter Your Email..." v-model="email" />
</div>
</div>

<div class="form-group-custom">
<label for="name">password</label>
<div class="form-input-outer">
<input type="password" class="from-input" placeholder="Enter Your Password..." v-model="password" />
</div>
</div>

<div class="remember-me">
<input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1" />
<label for="styled-checkbox-1">remember me</label>
</div>

<div class="login-buttons d-flex align-items-center justify-content-center">
<button type="submit" class="form-btn">login</button>
</div>
</form>



export default {
  name: "signin",
  data() {
    return {
      email: "",
      password: "",
    };
  },
}

  ask by RAHUL KUNDU translate from so

Answer 1

You need to save value1 in the data block, then write a function to handle form submission:

(您需要将value1保存在数据块中，然后编写一个函数来处理表单提交：)

data() {
    return {
      email: "",
      password: "",
      value1: false, // remember the user
    };
  },
  methods: {
    submitForm() {
      // send form data to the server
    }
  }

To connect your button to a method, use @click="submitForm() inside the HTML <button> tag.

(要将按钮连接到方法， @click="submitForm()在HTML <button>标记内使用@click="submitForm() 。)

Note a better variable name might be rememberUser .

(请注意，更好的变量名称可能是rememberUser 。)

Also I notice you're missing <template> and <script> tags.

(我也注意到您缺少<template>和<script>标记。)