时间戳

首页 > 解决方案 > VueJS v-validate方法在传递到组件后无法操作

vue.js - VueJS v-validate方法在传递到组件后无法操作

问题描述

更清晰的问题： 如何让附加到错误对象的方法在 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属性中正确地看到它。

标签： vue.js

解决方案

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

<script>
export default {

    name: "field",

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

}
<script>

推荐阅读