未设置组件复选框（vue、vee 验证）

Question

我的组件 Checkbox 对包含所需规则验证的未初始化表单（注册）正常工作。我继续编辑用户表单，但未能对其进行初始化。布尔属性已设置，但没有效果 - 未选中复选框。您可以在这里自己尝试：https://codesandbox.io/s/falling-tree-6g8qy。我已经用谷歌搜索过，有人建议将 v-model 设置为某些属性。但是我使用了一个带有 vee-validate 的组件，并且 v-model 需要发出一个信号。

复选框.vue

<template>
    <ValidationProvider
        tag="span"
        v-model="innerValue"
        :vid="vid"
        :rules="rules"
        :name="name || label"
        v-slot="{ errors, required }"
    >
        <input :id="identifier" v-model="innerValue" :value="identifier" type="checkbox" ref="input">
        <label :for="identifier">
            <span>{{label}}</span>
        </label>
    </ValidationProvider>
</template>

<script>
    import {ValidationProvider} from "vee-validate";

    export default {
        props: {
            vid: {
                type: String,
                default: undefined
            },
            identifier: {
                type: String,
                default: undefined
            },
            name: {
                type: String,
                default: ""
            },
            label: {
                type: String,
                default: ""
            },
            rules: {
                type: [Object, String],
                default: ""
            },
            value: {
                type: null,
                default: ""
            },
            checked: {
                type: Boolean,
                default: false
            }
        },
        components: {
            ValidationProvider
        },
        data: () => ({
            innerValue: null
        }),
        watch: {
            innerValue(value) {
                this.$emit("input", value);
            }
        }
    };
</script>

store.js

export default new Vuex.Store({
    actions: {
        GET_USER_PROFILE_BY_ID: async (context, payload) => {
            return {
                driving: {
                    vehicles: ['car']
                }
            };
        },
    },
});

App.vue

<ValidationObserver ref="form" v-slot="{ passes, invalid }">
    <form @submit.prevent="passes(submitForm)">
        <label for="vehicle">Vehicles</label>
        <Checkbox v-model="car" label="car" name="vehicle" identifier="car"/>
        <Checkbox v-model="bus" label="bus" name="vehicle" identifier="bus"/>
        <Checkbox v-model="van" label="van" name="vehicle" identifier="van"/>
        <Checkbox v-model="truck" label="truck" name="vehicle" identifier="truck"/>

        <div>
            <button type="button" :disabled="invalid" @clicked="submitForm()">Submit</button>
        </div>
    </form>
</ValidationObserver>

<script>
    export default {
        name: "App",
        components: {
            Checkbox,
            ValidationObserver
        },
        data: () => ({
            car: null,
            bus: null,
            van: null,
            truck: null,
            error: null,
            success: null
        }),
        created() {
            this.getProfile(1);
        },
        methods: {
            async getProfile(id) {
                try {
                    const response = await this.$store.dispatch("GET_USER_PROFILE_BY_ID", {
                        id
                    });
                    console.log(response);
                    this.car = response.driving.vehicles.includes("car");
                    this.bus = response.driving.vehicles.includes("bus");
                    this.van = response.driving.vehicles.includes("van");
                    this.truck = response.driving.vehicles.includes("truck");
                    console.log(this.car);
                } catch (err) {
                    console.log(err);
                }
            }
        }
    }
</script>

Answer 1

如果我正确理解了您的问题，this sandbox should help。

我所做更改的摘要：

去掉 Checkbox.vue 上的 :value="identifier"，它会与 v-model 冲突（因为 v-model 只是一个 :value 和 @input）。

用:checked = value 和@input="$emit('input', $event)" 替换了innerValue 数据和它的观察者。由于我摆脱了 innerValue 并且您不应该更新道具，因此它只是发出而不是获取值。

去掉 prop "checked" 因为它没有被使用

我建议将复选框值保留为 true 或 false 而不是 null，因为这是它们唯一可以拥有的两个值。

编辑：

我已经从您更新的沙箱中分叉了代码，可以使用here。

将 innerValue 替换为 value 因为 innerValue 不存在 -- 修复了所有控制台错误。

将发射值从 $event 更改为 $event.target.checked -- 所以它发射的是真或假而不是整个事件

我不得不在复选框后面添加:value="value"，因为显然 VeeValidate 需要一个 v-model 或一个 :value 作为提示，文档找到了here。