Question

我刚刚开始使用Vue.js并且想要使用vee-validator插件，所以我不必重新发明轮子。无论你是否使用vee-validator，我都相信Vue wizards会知道如何应对这种情况。

为了帮助保持我的代码清洁，以便更新一个地方更新到处想法是正确的我正在尝试制作一些非常好的样式和包装HTML输入的自定义组件。

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

我一直在尝试使用Vee-Validate中的这个样本，但样本不是很清楚，也不是我想要做的。 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 =＆＃34;＆＃39; required | email＆＃39;＆＃34;到主应用程序中的自定义组件调用没有运气，并在TextInput.vue文件中尝试它没有运气。不幸的是，关于vee-validator的文档并没有公正地描述数据vv-value-path究竟是什么，所以我不知道我应该把它作为一个值放在那里。

Answer 1

I think your text input name prop should be 'email' instead of 'test':

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

because that's the error you're looking for in your InputWrapper.vue:

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

As the documentation says

The plugin augments your Vue instance with a private validator object and a public errors data object.

the same object should be accessible across all components.

Answer 2

您可以尝试将主应用$validator注入子组件InputWrapper.vue和TextInput.vue：

export default {
  inject: ['$validator']
}

...但是插槽不是much supported，如果注入不起作用，则可能必须使用事件总线实例：

const bus = new Vue({})
// ...
bus.$emit('value_changed', newValue)
// ...
bus.$on('value_changed', (value) => {
  // do something
})

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

2 个答案: