VeeValidate 检查整个范围内的错误答案

【问题标题】：VeeValidate check for errors in entire scopeVeeValidate 检查整个范围内的错误
【发布时间】：2019-01-17 10:30:00
【问题描述】：

如果在特定范围内出现错误，我会尝试发出警告。这是因为表单跨越多个选项卡，希望人们更容易看到需要修复的内容。

问题是，我尝试了多种方法，但都不起作用。这是当前的方法：

const TabInternals = Vue.component('TabInternals', {
    props: {
        title: String,
        scope: String
    },
    render() {
        return (
            <div>
                <i v-show={this.errors.any(`${this.scope}.*`)} class="fas fa-exclamation-circle"></i>{` ${this.title}`}
            </div>
        );
    }
});

谁能看到我做错了什么？提前致谢

【问题讨论】：

此组件中是否提供this.errors？或者您也需要将其传递为props？
@ljubadr 它在组件中可用。我相信它会自动结转。出于好奇，我确实尝试将 this.errors 向下传递，但没有任何效果。
试试这个github issue。
代码现在如下但没有工作： const TabInternals = Vue.component('TabInternals', { inject: ['$validator'], props: { title: String, scope: String }, render() { return (
${this.scope}.*)} class="fas fa-exclamation-circle">{` ${this.标题}`}
); } });
也许可以试试<i v-show="this.errors.any()" ...

标签： vue.js jsx vee-validate

【解决方案1】：

默认情况下，每个组件都有自己的 vee 验证器实例（因此也会出错）。如果您想从不同的范围访问错误，则需要使用注入将父验证器实例传递给子组件，以便它们共享一个验证器实例：

export default {
  inject:[ '$validator'],
  // ...
};

参考-https://github.com/baianat/vee-validate/issues/1774

【讨论】：