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

我有一个登录表单，在我的登录组件中有两个字段。我还有一个“记住我”复选框。选中复选框后，如何使其正常工作。它将记住电子邮件和密码

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

你的电子邮件
密码
记得我吗
登录
导出默认值{
姓名：“签名”，
数据（）{
返回{
电邮：“，
密码：“”，
};
},
}

您需要在数据块中保存

value1

，然后编写一个函数来处理表单提交：

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

要将按钮连接到方法，请在HTML

标记内使用

@click=“submitForm（）

---

注：更好的变量名可能是

rememberUser

。此外，我注意到您缺少

和

标记。

能否请您与我分享一个详细的示例。