Vee 验证返回 true，但应该返回 false

Question

我正在使用 Vuetify，并且有一个表单，我使用 VeeValidate 进行表单验证... 当我使用这个时：

this.$validator.validateAll().then((result) => {
            console.log("result form", result);
            //result ? this.onSubmit() : scrollTo(0, 250);
        });

它总是返回 true，即使我的输入字段上的验证无效... 输入看起来像：

<v-textarea
    filled
    name="string"
    :label="placeholderText"
    auto-grow
    single-line
    :placeholder="placeholderText"
    v-model="answer"
    :required="isRequired"
    v-validate:computedProp="checkRequired"
    :error-messages="errors.collect('string')"
    data-vv-name="string"
    :hint="hintText"
    @blur="updateAnswer"
></v-textarea>

输入组件的代码：

export default {
$_veeValidate: {
    validator: 'new'
},
name: 'String',
props: {
    placeholderText: {
        default: 'Add a value'
    },
    hintText: {
        default: 'Add a value'
    },
    isRequired: {
        default: true
    }
},
data: () => ({
    answer: ''
}),
computed: {
    checkRequired() {
        return this.isRequired ? 'required' : ''
    }
},
methods: {
    updateAnswer() {
        this.$validator.validateAll();
        this.$emit('updateAnswer', this.answer);
    }
}

}

我在另一个组件中调用 this.$validator.validateAll()...输入组件是一个独立组件...我将它全部包装在一个表单标签中，并在提交时运行验证功能

Answer 1

你有两个选择：

1. 将来自$attrs的v-validate传递给组件

2. 将 $validator 注入组件

家长

export default {
  name: "App",
  components: {
    YourComponent
  },
  provide() {
    return {
      $validator: this.$validator
    };
  },

孩子

 $_veeValidate: {
    validator: "new"
  },
  inject: ["$validator"],
  name: "String",

你也可以简化你的html代码，见VeeValidate Syntax

HTML

v-validate="{ required: this.isRequired }"

你可以安全地删除

:required="isRequired"