Vuejs 将 vee-validate 传递给自定义复选框输入

Question

我无法使用 vee-validate 支持制作自定义复选框组件。我是Vue的新手。在我的应用程序中，复选框必须是必需的。但它不起作用。我阅读了很多关于 vee-validate 和自定义输入的文章，但所有示例都基于简单的自定义文本输入。

此刻在我的代码下方。

父组件：

    <!-- Custom text input. Vee-validate works nice. -->
    <input-text
        name="email"
        placeholder="Please, enter email"
        label="Email"
        :required="true"
        :type="'email'"
        :value.sync="shareholder.fields.email"
        v-validate.initial="'required|email'"
        data-vv-delay="500"
        :className="{'error': isShowError('email')}"
        :disabled="isDisabled"
    />

    <!-- Custom checkbox input. Vee-validate doesn't work. -->
    <checkbox2
        name="consent"
        v-if="consent"
        class="consent"
        :required="true"
        :disabled="isDisabled"
        :className="{'error': errors.first('consent')}"
        :error="errors.first('consent')"
        v-model="consentStatus"
        v-validate.initial="'required'"
    >
        {{consent.text}}<br><a :href="consent.link" target="_blank">{{consent.linkText}}</a>
    </checkbox2>
    {{ errors.first('consent') }}

文件check-box.vue：

<template>
    <div class="checkbox"
         :class="{ active: !!value }"
    >
        <label class="control">
            <input
                @change="handleChange"
                type="checkbox"
                :name="name"
                :checked="value"
            />
            <span class="icon-checkbox"></span>
        </label>

        <div class="label">
            <slot />
        </div>
    </div>
</template>

<script src="./check-box.js"></script>
<style lang="stylus" src="./check-box.styl" scoped></style>

文件check-box.js：

export default {
    name: 'checkbox2',
    inject: [ '$validator', ],
    // In one of articles I read I must bind event and value
    // with check box like below. But it seems it doesn't work too.
    model: {
        event: 'input',
        value: 'checked',
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        error: {
            type: String,
        },
        name: String,
        disabled: Boolean,
        className: Object,
        required: Boolean,
    },
    data: function() {
        return {
            checked: false,
        }
    },
    methods: {
        handleChange() {
            if (!this.disabled) {
                this.checked = !this.value
                 // If I emit 'change' instead of 'input',
                 // checkbox component works wrong.
                this.$emit('input', this.checked)
            }
        },
    },
    created() {
        this.checked = this.value
        this.$validator = this.$parent.$validator
    },
}

Answer 1

用户必须选中我们的复选框以使表单有效。

首先，在 vee-validate 中，'required' 中的 Boolean 不等于 null 时为 true。 IE。如果consentStatus = null，则默认情况下下面的复选框无效（我需要）。

<checkbox2
    name="consent"
    v-if="consent"
    class="consent"
    :required="true"
    :disabled="isDisabled"
    :className="{'error': errors.first('consent')}"
    :error="errors.first('consent')"
    v-model="consentStatus"
    v-validate.initial="'required'"
>
    {{consent.text}}<br><a :href="consent.link" target="_blank">{{consent.linkText}}</a>
</checkbox2>

但在这种情况下，两个可能的值（true 和 false）使该组件有效。

变体 1

默认规则 v-validate.initial="{ is: true }" 不适用于 vee-validate 2.1.0-beta-9 及以下版本。所以我们需要一个拐杖。

在导入后的父组件js文件中，我们应该定义自定义验证器规则。

import { Validator } from 'vee-validate';

Validator.extend('isEqual', {
    getMessage: field => 'Your text in case of checkbox mistake. ' + field + ' is invalid.',
    validate: value => value
});

父vue文件代码：

<checkbox2
    name="consent"
    v-if="consent"
    class="consent"
    :required="true"
    :disabled="isDisabled"
    :className="{'error': errors.first('consent')}"
    :error="errors.first('consent')"
    v-model="consentStatus"
    v-validate.initial="{ isEqual: true }" // Here is difference!
>
    {{consent.text}}<br><a :href="consent.link" target="_blank">{{consent.linkText}}</a>
</checkbox2>
{{ errors.first('consent') }}

变体 2

我们将值作为数字进行比较。父级vue代码：

<checkbox2
    name="consent"
    v-if="consent"
    class="consent"
    :required="true"
    :disabled="isDisabled"
    :className="{'error': errors.first('consent')}"
    :error="errors.first('consent')"
    v-model="consentStatus"
    v-validate.initial="{ is: 1 }" // Here is difference!
>
    {{consent.text}}<br><a :href="consent.link" target="_blank">{{consent.linkText}}</a>
</checkbox2>
{{ errors.first('consent') }}

文件check-box.vue：

<template>
    <div class="checkbox"
         :class="{ active: !!value, error: !!error }"
    >
        <label class="control">
            <input
                @change="handleChange"
                type="checkbox"
                :name="name"
                :checked="value"
            />
            <span class="icon-checkbox"></span>
        </label>

        <div class="label">
            <slot />
        </div>
    </div>
</template>

<script src="./check-box.js"></script>
<style lang="stylus" src="./check-box.styl" scoped></style>

文件check-box.js：

export default {
    name: 'checkbox2',
    props: {
        error: {
            type: String,
        },
        value: Boolean,
        name: String,
        disabled: Boolean,
        className: Object,
        required: Boolean
    },
    methods: {
        handleChange() {
            if (!this.disabled) {
                this.$emit('input', this.value ? 0 : 1);
            }
        }
    }
}