Vue2使用Vuelidate调用this.$v.userData.lastName.$error触发栈溢出

问题原因 #

你当前使用的验证器依赖版本不匹配：Vue2对应的Vuelidate版本是v0.x，但你导入的@vuelidate/validators是为Vuelidate v2（适配Vue3）设计的，两者API结构不兼容，访问$error时会触发无限递归，最终导致栈溢出。

解决方案 #

1. 调整验证器导入路径 #

将验证器的导入来源改为Vuelidate v0.x自带的库：

<script>
import { validationMixin } from "vuelidate";
// 替换导入路径
import { required } from "vuelidate/lib/validators";

export default {
  mixins: [validationMixin],
  data() {
    return {
      userData: {
        lastName: "12312",
        name: "",
      },
    };
  },
  validations() {
    return {
      userData: {
        lastName: { required },
        name: { required },
      },
    };
  },

  methods: {
    consoleLog() {
      // 现在可正常访问$error
      console.log(this.$v.userData.lastName.$error);
    },
  },
};
</script>

<template>
  <div id="app">
    <button @click.prevent="consoleLog">Тест</button>
  </div>
</template>

2. 确认依赖版本 #

确保package.json中vuelidate为v0.x版本，示例：

{
  "dependencies": {
    "vuelidate": "^0.7.6",
    "vue": "^2.6.14"
  }
}

若之前安装了@vuelidate/validators，可卸载：

npm uninstall @vuelidate/validators
# 或 yarn remove @vuelidate/validators

原理说明 #

Vuelidate v0.x的验证器是简单的函数结构，而v2的@vuelidate/validators返回的是包含额外上下文的对象。当v0.x的validationMixin尝试解析这些对象时，会触发无限的属性遍历或递归调用，最终超出调用栈上限。

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