VueJS v-validate方法在传递到组件后无法操作答案

【问题标题】：VueJS v-validate methods inoperable after passing into componentVueJS v-validate方法在传递到组件后无法操作
【发布时间】：2019-06-28 19:00:43
【问题描述】：

更清楚的问题： 如何让附加到错误对象的方法在 v-validate 正在运行的组件中工作？

更长的问题：

我设置了 v-validate 来处理包含输入的组件。

它实际上运行良好，只是组件内的errors 对象运行不正确。每当父级中的errors 对象发生更改时，我可以看到它反映在errors.items 属性中——我的表单中的所有错误都存在。但是这些方法不起作用 - this.errors.count() 总是返回零，this.errors.collect(this.name) 总是返回一个空数组。

this.errors.list 对象上的 name 属性与组件中的 this.name 匹配。即使使用硬编码字符串而不是 this.name 也没有效果。

我的想法是存在某种内部引用来保持方法，也许与 VueJS 道具有关？

短版代码：

<myinput v-validate="'required'" v-model="name" :name="name"></myinput>

<template>
    <div>
        <input
            :value="value"
            @input="updateValue()"
            ref="input"                
            :name="name"
            type="text"
            />
        <p v-for="error in errorMessages" :key="error.zerp">{{ error }}</p>
    </div>
</template>

props: [
    "name", 
    "value",        
],
computed: {
    errorMessages : function(){
        //this.errors.list has the errors
        //collect function always returns empty array []
        console.log(this.errors, this.error.collect(this.name));

        return this.errors ? this.errors.collect(this.name) : [];
    }
}

更多信息： 在调试器中观察ErrorBag.prototype.collect 方法，this.items 确实有我希望看到的集合。我还没有弄清楚它是如何没有从名称中获得正确的最终集合的，我也可以在field 属性中正确地看到它。

【问题讨论】：

您如何将“错误”传递给您的子组件？
@men32z 我花了一分钟才弄明白——我仍然不能完全确定。如果我创建一个名为“错误”的道具，它会抱怨已经设置的道具。我相信 v-validate 插件将错误对象直接挂接到组件上。值得注意的是，在我的场景中，我有这个组件的几个实例 - 每个实例都获取整个集合的所有错误的完整对象，因此需要使用 collect() 方法
好的，可能是您在子组件之外使用 v-validate="'required'"，尝试将“required”作为道具传递并在您的子组件。

标签： vue.js

【解决方案1】：

您应该将验证器注入您的子组件。不需要道具或传递错误。

<script>
export default {

    name: "field",

    inject: {
        $validator: '$validator'
    },

}
<script>

【讨论】：

这看起来可以做到，但是你能提供一个更完整的这个模式的例子吗？我还没有根据核心文档弄清楚。谢谢