Vue2 验证“this.$v.userData.lastName.$error”导致“超出最大调用堆栈大小”

Question

我在使用 Vuelidate 的 Vue2 项目中遇到问题。我需要实现数据验证，理论上“this.$v.userData.lastName.$error”应该返回 true 或 false，但结果我得到一个“Maximum call”堆栈大小超出”错误。

<script>
import { validationMixin } from "vuelidate";
import { required } from "@vuelidate/validators";

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

  methods: {
    consoleLog() {
      //This throws an error
      console.log(this.$v.userData.lastName.$error);
    },
  },
};
</script>

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

请帮忙。这是我在 Vue 上的第一个项目。我一整天都在尝试解决这个问题，但没有任何结果。

Answer 1

Vuelidate 有两个版本，您错误地将它们混合在一起。

有较旧的

vuelidate

v0.7.7 软件包，专为 Vue 2 制作，其验证器来自

vuelidate/lib/validators

。 文档链接

还有较新的

@vuelidate/core

软件包，与 Vue 2 和 Vue 3 兼容，其验证器来自单独安装的

@vuelidate/validators

软件包。 文档链接

所以你的主要问题是使用较旧的

vuelidate

0.7.7 和较新的

@vuelidate/validators

，而你应该正在使用

vuelidate/lib/validators

。将导入行更改为：

import { required } from "vuelidate/lib/validators";

您可以卸载

@vuelidate/validators

软件包，因为不需要它。今后请确保您始终遵循适用于您的 Vuelidate 版本的正确文档！