Vue表单无value属性时，如何校验输入字段是否为空？

因为Vue的v-model是双向绑定数据到Vue实例的响应式变量，直接通过DOM查询拿input.value不是Vue的正确用法，而且可能因为Vue异步更新DOM的机制导致拿不到最新值。推荐直接操作绑定的数据源来做校验，以下是具体方案：

方案一：直接校验绑定的响应式数据（推荐） #

既然用v-model="forms[question.id]"把输入值绑定到了forms对象里，直接遍历forms和你的data数据来检查字段是否为空即可，完全不需要操作DOM：

示例代码（Vue组件方法） #

// 假设这是你的Vue组件中的校验方法
validateAllForms() {
  let hasEmpty = false;
  // 遍历每个表单的问题列表
  this.data.forEach(questionsGroup => {
    questionsGroup.forEach(question => {
      // 检查对应字段是否为空（同时处理纯空格的情况）
      const fieldValue = this.forms[question.id];
      if (!fieldValue || fieldValue.trim() === '') {
        hasEmpty = true;
        // 这里可以添加提示逻辑，比如给对应输入框加错误样式，或者弹出提示
        console.log(`问题ID ${question.id} 对应的输入框未填写`);
      }
    });
  });

  if (hasEmpty) {
    alert('存在未填写的必填字段，请检查');
    return false; // 阻止后续操作（比如表单提交）
  }
  return true; // 校验通过
}

方案二：若必须操作DOM，确保在Vue更新DOM后获取 #

如果因为特殊场景需要操作DOM拿值，要等Vue完成DOM更新后再执行查询，用$nextTick确保DOM已经同步了最新数据：

示例代码 #

this.$nextTick(() => {
  document.querySelectorAll('form').forEach(form => {
    form.querySelectorAll("input").forEach(input => {
      console.log(input.value); // 此时能正确获取到v-model绑定的值
      // 你的空值校验逻辑
      if (!input.value.trim()) {
        alert('当前输入框不能为空');
      }
    });
  });
});

为什么原代码拿不到值？ #

1. Vue的DOM更新是异步的，当你直接执行document.querySelectorAll时，Vue可能还没把forms里的数据同步到DOM的input.value上；
2. Vue的设计思路是数据驱动视图，视图由数据决定，所以优先操作数据而非DOM才是符合Vue规范的做法，也能避免很多奇怪的问题。

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