Vue使用Pug开发邮箱验证页时提示Property "text"未定义如何解决？

问题原因 #

你遇到的警告来自模板中变量引用不匹配，还有几处隐性问题整理如下：

1. v-model绑定错误：模板中va-input绑定的变量是text，但setup函数暴露给模板的响应式变量名为verificationCode，不存在的变量text触发了Vue的变量未定义警告
2. 类名不匹配：模板中按钮行使用的类是Login__buttonRow，但SCSS中定义的是Verify__buttonRow，导致按钮对齐样式不生效
3. 测试逻辑阻塞正式请求：useVerify中的硬编码验证码判断会拦截所有非123456的请求，后续对接后端时需要移除
4. GraphQL参数可能不匹配：当前请求变量里把验证码塞到了username字段，若后端接口接收的是verificationCode字段需要同步调整

解决步骤 #

1. 修改模板变量绑定 #

找到.vue文件模板部分的va-input配置，把v-model="text"改为：

v-model="verificationCode"

2. 统一类名 #

把模板里的.Login__buttonRow改为.Verify__buttonRow，和SCSS的类名保持一致：

.Verify__buttonRow
  va-button.Login__submitButton(@click="verifyUser") Verify

3. 调整逻辑代码（对接后端时操作） #

移除useVerify.ts中的硬编码测试逻辑，避免正式请求被拦截：

// 删除以下代码块
if (verificationCode.value !== "123456") {
  return;
}
else{
  console.log("worked");
  //TODO: auth here
}

4. 对齐后端接口参数 #

确认后端验证接口接收的参数字段，若为verificationCode则调整请求变量：

const variables = {
  input: { verificationCode: verificationCode.value },
};

修改完成后警告就会消失，输入的验证码也能正常同步到逻辑层。

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