RangeError：超出最大调用堆栈大小”同时使用 vuelidate 和 vuetify

Question

我在我的 vue typescript 项目中设置了 vuelidate，如下所示

main.ts

import Vuelidate from "vuelidate";

Vue.use(Vuelidate);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

在我的一个组件中，我尝试为字段添加验证。这就是我的组件的样子：

数量.vue

<template>
  <v-container>
    <v-row align="center" justify="space-around">
      <v-col cols="1">
        <v-text-field
          v-model="quantity"
          label="qty"
          outlined
          @change="saveValue"
          :error-messages="quantityErrors"
          @input="$v.quantity.$touch()"
          @blur="$v.quantity.$touch()"
        ></v-text-field>
      </v-col>

...

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

...

export default {
  mixins: [validationMixin],
  data() {
    return {
      ...
      quantity: null,
    }
  },
  methods:{
    saveValue(){
      console.log('saving..
    }
  },
  computed: {
    quantityErrors() {
      const errors = [];
      if (!this.$v.quantity.$dirty) return errors;
      !this.$v.quantity.required && errors.push("Qty is required");
      return errors;
    },
  validations() {
    return {
      quantity: { required },
    };
  },

...

但是每次我加载组件时，都会抛出此错误

vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "RangeError: Maximum call stack size exceeded"

found in

---> <VTextField>
       <Quantity> at src/components/add/Quantity.vue
         <QuantityList> at src/components/add/QuantityList.vue
           <VForm>
             <Add> at src/views/Add.vue
               <VMain>
                 <VApp>
                   <App> at src/App.vue
                     <Root>
warn @ vue.runtime.esm.js:619
logError @ vue.runtime.esm.js:1884
globalHandleError @ vue.runtime.esm.js:1879
handleError @ vue.runtime.esm.js:1839
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2179
invokeWithErrorHandling @ vue.runtime.esm.js:1854
Vue.$emit @ vue.runtime.esm.js:3888
(anonymous) @ VTextField.ts:442
(anonymous) @ vue.runtime.esm.js:1980
flushCallbacks @ vue.runtime.esm.js:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js:1933
nextTick @ vue.runtime.esm.js:1990
queueWatcher @ vue.runtime.esm.js:4402
update @ vue.runtime.esm.js:4544
notify @ vue.runtime.esm.js:730
reactiveSetter @ vue.runtime.esm.js:1055
proxySetter @ vue.runtime.esm.js:4631
onBlur @ VTextField.ts:441
invokeWithErrorHandling @ vue.runtime.esm.js:1854
invoker @ vue.runtime.esm.js:2179
original._wrapper @ vue.runtime.esm.js:6917
vue.runtime.esm.js:1888 RangeError: Maximum call stack size exceeded
    at new Observer (vue.runtime.esm.js:911)
    at observe (vue.runtime.esm.js:988)
    at initData (vue.runtime.esm.js:4741)
    at initState (vue.runtime.esm.js:4642)
    at VueComponent.Vue._init (vue.runtime.esm.js:5006)
    at new VueComponent (vue.runtime.esm.js:5154)
    at createVm (vval.js:23)
    at addVvals (vval.js:113)
    at patchChildren (vval.js:141)
    at VueComponent.refs (index.js:223)

即使我删除

:error-messages="quantityErrors"

行，并尝试在文本字段内添加值，

@vblur="$v.quantity.$touch()"

也会被执行并抛出相同的错误。

知道我缺少什么吗？

谢谢！

Answer 1

对我来说，问题的原因是我将验证规则定义为字符串而不是对象。

错误：

const rules = { firstName: 'required' }

右：

const rules = { firstName: { required } }