将Vue.js中的验证数据传递给插槽

我刚开始使用Vue.js并希望使用vee-validator插件，因此我不必重新发明轮子。无论您是否使用VE验证程序，我相信您的Vue向导都会知道如何处理这种情况。将Vue.js中的验证数据传递给插槽

为了帮助保持我的代码清洁，以便更新一处更新无处不在我的想法是使一些自定义组件只是很好地风格和包装HTML输入。

在这个简单的例子，我只是有一个的TextInput但想法是遵循相同的格式，但有其他类型的输入，文字区域，选择等

我一直在试图用此示例从工作Vee验证，但样本不是很清楚，也不完全是我想要做的。 http://vee-validate.logaretm.com/examples.html#component-example

所以我主要的应用程序是这样的：

<template> 
    <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h3 class="panel-title pull-left">New Post</h3> 
       </div> 
       <div class="panel-body"> 

        <inputWrapper label="My Label" icon="fa-user"> 
         <textInput name="test" placeholder="Edit me"></textInput> 
        </inputWrapper> 

       </div> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     data(){ 
      return { 
      } 
     } 
</script>

然后我有InputWrapper.vue文件：

<template> 
    <div class="form-group" v-bind:class="{ 'has-error': errors.has('email') }"> 
     <div class="col-md-12"> 
      <label>{{ label }}</label> 
      <div class="input-group"> 
       <span class="input-group-addon" v-if="icon"><i class="fa fa-lg " v-bind:class="icon"></i></span> 
       <slot></slot> <!-- Input element passed from parent --> 
      </div> 
      <small class="help-block" v-show="errors.has('email')"> 
       <strong>{{ errors.first('email') }}</strong> 
      </small> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['label', 'icon'], 

     data(){ 
      return { 
      } 
     } 
    } 
</script>

而且我TextInput.vue：

<template> 
    <input 
     v-bind:id="name" 
     v-bind:name="name" 
     v-bind:placeholder="placeholder" 

     v-on:keyup="onInput" 

     class="form-control" /> 
</template> 

<script> 
    export default { 
     props: ['name', 'placeholder', 'type'], 

     data(){ 
      return { 
      } 
     }, 

     methods: { 
      onInput(e) { 
       const value = e.target.value; 
       this.$emit('input', value); 
      } 
     } 
    } 
</script>

我一直在修补TextInput.vue中的onInput（）方法，但我不确定这是我该怎么做。

注意InputWrapper.vue文件具有'错误'errorBag，但它不显示错误。我认为这是因为errors.has（）和errors.first（）不存在于正在验证的组件中。

如何获取InputWrapper以显示来自我的自定义TextInput组件的错误？

我已经在主应用程序中添加了v-validate =“'required | email'”到没有运气的自定义组件调用，并且在没有运气的情况下在TextInput.vue文件中尝试了它。不幸的是，vee-validator上的文档并不是一概而论地描述了什么data-vv-value-path真的是这样，所以我不知道我应该把它作为一个值放在那里。

来源

2017-04-08 P-Rick Stephens

我愿意接受其他现有验证器的建议，或者选择做我自己的建议，如果这样做会让我的生活更轻松。 –

我觉得你的文字输入名字道具应该是不是“测试”，“电子邮件”：

<textInput name="email" placeholder="Edit me"></textInput>

因为这是你正在寻找您的InputWrapper.vue错误：

<div class="form-group" v-bind:class="{ 'has-error': errors.has('email') }">

正如文档所述

该插件使用私有验证器对象和公共错误数据对象来扩充您的Vue实例。

应该可以跨所有组件访问同一个对象。

来源

2017-04-08 22:27:54

将Vue.js中的验证数据传递给插槽

回答

相关问题