Nuxt3应用中v-model双向数据绑定失效问题求助

问题核心 #

输入邮箱和密码后，组件内的email、password ref值未同步更新，导致提交按钮的!email || !password判断始终为true，保持禁用状态。

排查与解决方案 #

1. 手动导入Vue响应式API（最可能的原因）

Nuxt3默认会自动导入ref、computed等Vue Composition API，但部分场景下（如自定义配置禁用自动导入、版本兼容问题）会导致自动导入失效。此时创建的email、password并非响应式引用，v-model自然无法同步更新。

解决方法：在<script setup>开头手动导入所需API：

import { ref, computed } from 'vue'
import { useGlobalStore } from "@/stores/global";
import { useAccountStore } from "@/stores/account";

2. 排查变量名冲突

检查项目中是否存在全局变量、store内变量或其他组件变量与email/password重名，导致v-model绑定的不是当前组件的响应式ref。可以临时修改变量名测试，比如改为formEmail、formPassword，确认是否能正常更新。

3. 升级Nuxt3到稳定版

若使用的是较旧的Nuxt3版本，可能存在<script setup>的响应式绑定bug。执行以下命令升级到最新稳定版：

npx nuxi upgrade

4. 验证响应式是否正常工作

在输入过程中添加日志打印，确认ref值是否真的未更新：

// 在email和password定义后添加监听
watch([email, password], ([newEmail, newPwd]) => {
  console.log('当前输入值：', newEmail, newPwd)
})

如果日志无输出，说明响应式未生效，回到前几个方案排查；如果有输出，再检查按钮的禁用条件逻辑是否有其他隐藏问题。

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