Question

我在我的登录组件中有一个包含2个字段的登录表单。我还有一个“记住我”复选框。选中复选框后，如何使它起作用。它将记住电子邮件和密码。

<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: "",
    };
  },
}

Answer 1

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

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

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

请注意，更好的变量名称可能是rememberUser。另外，我注意到您缺少<template>和<script>标签。

登录表单中的“记住我”复选框

1 个答案: