在 vue 3 中，同时使用 `v-model` 和 `:value` 绑定同一输入框会导致响应式失效——输入框被“冻结”，用户无法修改内容。正确做法是仅用 `v-model`，并在初始化表单时读取 cookie 值作为默认值。
问题根源在于你对
✅ 正确解法：移除 :value，将 Cookie 值直接注入 useForm 初始化数据中。
以下是优化后的 setup() 逻辑（已修正关键错误）：
import { useForm } from "@inertiajs/vue3";
import { onMounted, ref } from "vue";
import VueCookies from "vue-cookies";
export default {
// ...其他配置保持不变
setup() {
// ✅ 正确读取 Cookie：onMounted 中获取，并赋值给 form 初始值
const form = useForm({
email: "", // 默认空字符串
password: "",
remember: false,
});
onMounted(() => {
const savedEmail = VueCookies.get("email");
if (savedEmail && typeof savedEmail === "string") {
form.email = savedEmail; // ✅ 直接赋值，无需 ref 包裹
}
});
const submit = () => {
// 登录成功后，如需保存邮箱到 Cookie（可选）
if (form.remember) {
VueCookies.set("email", form.email, "1d"); // 保存1天
} else {
VueCookies.remove("email");
}
form.post(route("login"), {
onFinish: () => form.reset("password"),
});
};
return { form, submit };
},
};对应模板中，务必删除 :value="rememberedEmail" 属性，只保留 v-model：
Session Handoff
下载
创建全面的交接文档，使新AI代理能够无缝继续工作，消除歧义。解决上下文耗尽问题。 时机：(1)用户请求保存交接，(2)上下文即将满，(3)主要任务完成，(4)会话结束，(5)恢复工作时。 关键词：保存状态、创建交接、上下文已满、暂停、从...恢复、加载交接、保存进度、会话转移、交接
立即学习“前端免费学习笔记（深入）”；
<TextInput id="email" type="email" class="mt-1 block w-full text-neutral-focus focus:border-accent" v-model="form.email" <!-- ✅ 唯一数据绑定 --> required autofocus autocomplete="username" />
⚠️ 注意事项：
- 不要在 setup() 顶层直接调用 VueCookies.get()，因为 SSR 环境下 document.cookie 不可用；必须在 onMounted（客户端挂载后）读取。
- 避免创建冗余的 ref（如原代码中的 rememberedEmail = ref(...)），form.email 本身已是响应式引用，直接操作即可。
- 若使用 TextInput 是自定义封装组件，请确保它正确实现了 v-model（即接收 modelValue prop 并触发 update:modelValue 事件）；否则需检查其内部实现是否符合 Vue 3 .model 机制。
- 安全提示：Cookie 中存储邮箱属于低敏感信息，但若后续扩展为存储 token 或密码，务必启用 HttpOnly、Secure 和 SameSite 等安全属性，并优先考虑服务端 Session 或更安全的持久化方案（如加密 localStorage + 内存缓存）。
总结：Vue 表单绑定应遵循单一数据源原则——v-model 负责双向同步，初始值由逻辑层注入，而非通过混合绑定干扰响应式系统。这一原则同样适用于 v-model 与 :value / :checked / :selected 等原生属性共存的场景。
