Question

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

我尝试在$emit和@input上使用@blur，但验证会在下一个时间点发生，我最终无法捕获事件验证。

  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)

    }
  }

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

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

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

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>

CustomInput

<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 });

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

1 个答案: