2

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

我尝试使用$emiton @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)

    }
  }

我还尝试从父级注入验证器，以便能够直接访问错误计算属性，但父页面和自定义输入组件本身之间可能存在 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>

自定义输入

<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

4

1 回答 1

0

我认为处理这个问题的最好方法是注入$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 });

于 2018-06-18T17:48:01.327 回答