解决Vuelidate挂载时表单边框变红问题：仅提交后触发校验

问题出在初始状态下，表单字段为空触发了Vuelidate的校验错误，导致错误样式直接生效。要实现仅提交后显示错误边框，需要结合提交状态标记和校验错误状态共同判断：

1. 添加提交状态变量
   在data中新增一个submitted变量，标记用户是否点击过提交按钮，初始值设为false。

2. 修改错误样式的判断条件
   动态类名的触发条件需要同时满足两个条件：

• 字段存在校验错误
• 字段已被触摸（$touched）或用户已点击提交（submitted为true）

修改后的完整代码 #

模板代码

<select
  class="form-control padding-10 padding-bottom-0"
  v-model="obj.questionId"
  :class="{
    'form-error-outline':
      v$.answerList.$each.$response.$errors[index].questionId.length > 0 &&
      (v$.answerList.$each.$response.$touched[index] || submitted)
  }"
>
  <option value selected disabled hidden>
    Select a question
  </option>
</select>

脚本代码

import { mapState } from "vuex";
import { useVuelidate } from "@vuelidate/core";
import { helpers, required, sameAs } from "@vuelidate/validators";

export default {
  setup() {
    return {
      v$: useVuelidate()
    };
  },
  data() {
    return {
      answerList: [
        { questionId: "", answer: "" },
        { questionId: "", answer: "" }
      ],
      submitted: false // 新增提交状态标记
    };
  },
  validations() {
    return {
      answerList: {
        $each: helpers.forEach({
          questionId: { required },
          answer: { required }
        })
      }
    };
  },
  methods: {
    onSubmit() {
      this.submitted = true; // 标记为已提交
      this.v$.$touch();

      if (this.v$.$invalid) {
        return;
      }

      // 这里添加表单提交的逻辑
    }
  }
};

原理说明 #

• 初始状态下submitted为false，即使字段为空触发校验错误，也不会满足错误样式的触发条件，边框保持正常。
• 用户点击提交后，submitted设为true，同时$touch()触发所有字段的校验，此时若字段校验不通过，错误样式就会生效，边框变红。

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