Vue登录表单：绑定Cookie邮箱后输入框无法编辑的解决问询

你遇到的核心问题是直接将Cookie值绑定到输入框的:value上——Cookie并非响应式数据源，无法和输入框的输入内容双向同步，导致输入框无法编辑。正确的做法是用响应式变量绑定输入框，再在组件初始化时从Cookie读取值填充这个变量，同时在登录时根据「记住我」的状态写入/清除Cookie。

修改后的完整组件代码 #

<template>
  <form @submit.prevent="handleLogin">
    <input type="email" v-model="email" placeholder="请输入邮箱" />
    <label>
      <input type="checkbox" v-model="rememberMe" /> 记住我
    </label>
    <button type="submit">登录</button>
  </form>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 定义响应式变量，绑定输入框和复选框
const email = ref('')
const rememberMe = ref(false)

// 读取指定名称的Cookie
const getCookie = (name) => {
  const value = `; ${document.cookie}`
  const parts = value.split(`; ${name}=`)
  if (parts.length === 2) return parts.pop().split(';').shift()
}

// 设置Cookie（默认有效期7天）
const setCookie = (name, value, days = 7) => {
  const date = new Date()
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
  const expires = `expires=${date.toUTCString()}`
  document.cookie = `${name}=${value}; ${expires}; path=/`
}

// 清除指定名称的Cookie
const deleteCookie = (name) => {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
}

// 组件挂载时，从Cookie读取邮箱并填充输入框
onMounted(() => {
  const savedEmail = getCookie('userEmail')
  if (savedEmail) {
    email.value = savedEmail
    rememberMe.value = true // 有存储的邮箱时自动勾选「记住我」
  }
})

// 登录处理逻辑
const handleLogin = () => {
  // 这里替换为你的实际登录验证逻辑（比如调用后端接口）
  
  // 登录成功后，根据「记住我」状态处理Cookie
  if (rememberMe.value) {
    setCookie('userEmail', email.value)
  } else {
    deleteCookie('userEmail')
  }
}
</script>

关键说明 #

• 用响应式变量绑定输入框：通过v-model="email"将输入框和响应式变量email绑定，确保输入框可正常编辑，输入内容会实时同步到email中。
• 初始化时填充Cookie值：在onMounted钩子中读取Cookie，若存在已存储的邮箱，就赋值给email，实现页面加载时自动填充。
• 登录时管理Cookie：登录成功后，根据rememberMe的勾选状态，决定写入Cookie保存邮箱，还是清除已有的邮箱Cookie。

内容的提问来源于stack exchange，提问作者cherno304