如何访问使用 vee-validate 验证的自定义输入组件上的错误计算属性？

Question

我正在尝试在自定义输入组件中使用 VeeValidate。

我尝试在 @input 和 @blur 上使用 $emit，但验证发生在下一个刻度上，我最终未能捕获事件验证。

  onEvent (event) {
    console.log('error length', this.errors.items.length)
    if (this.errors.items.length) {
      this.hasError = true
      this.$emit('has-error',this.errors.items)
    } else {
      this.hasError = false
      this.$emit('on-input', event)

    }
  }

我还尝试从父级注入验证器，以便能够直接访问错误计算属性，但父页面和自定义输入组件本身之间可能存在 1-2-3 级嵌套。我必须通过所有这些注入验证器，并且这些组件是可重用的。

 export default {
   //in custom input component
   inject: ['$validator'],
 }

我得到的最好的想法是观察 errors 计算属性，并在该组件实例中的错误发生更改时发出一个事件。

watch: {
  errors: function (errorsNew) {
    console.log('errors watch',errorsNew)
  }
},

问题是我似乎看不到 vee-validate 引入的错误计算属性。

一些简化版本的代码：

父母

<template>
  <div id="app">

    <CustomInput
      :label="'Lable1'"
      :value="'value from store'"
      :validations="'required|max:10|min:5'"
      :name="'lable1'"
    />
    <button>Save</button>
  </div>
</template>

<script>
import CustomInput from "./components/CustomInput";

export default {
  name: "App",
  components: {
    CustomInput
  }
};
</script>

自定义输入

<template>
   <div>
     <label >{{ label }}</label>
     <input :value="value" :name="name" v-validate="validations">
     <span v-if="this.errors.items.length">{{this.errors.items[0].msg}}</span>
  </div>

</template>

<script>
export default {
  name: "HelloWorld",

  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      default: ""
    },
    validations: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      required: true
    }
  },

  watch: {
    errors: function(errorsNew) {
      console.log("errors watch", errorsNew);
      this.$emit('has-error')
    }
  }
};
</script>

有人可以帮我访问自定义输入中的验证错误吗？

更新

如果有人觉得更容易测试它，我创建了一个简单的小提琴https://codesandbox.io/s/mqj9y72xx

Answer 1

我认为处理这个问题的最好方法是将$validator 注入到子组件中。这似乎是插件建议的方式：https://baianat.github.io/vee-validate/advanced/#injecting-parent-validator。

因此，在您的 CustomInput 中，您将添加 inject: ['$validator'],。

然后，在 App.vue 中，你可以在模板中拥有这个：

<div>
  These are the errors for "lable1" in App.vue:
     <span v-if="errors.has('lable1')">{{errors.first('lable1')}}</span>
</div>

我认为确实如此。

基于您的示例的工作示例：https://codesandbox.io/s/pw2334xl17

我意识到您已经考虑过这一点，但是 inject 方法会向上搜索组件树，直到找到 $validator 实例，所以也许您应该在应用程序的根级别禁用自动注入，因此每个组件搜索要注入的验证器都会得到那个。你可以这样做：

Vue.use(VeeValidate, { inject: false });