vue.js - 组件复选框未设置(vue、vee 验证)

Question

我的组件复选框对于统一表单(注册)可以正常工作，包括所需的规则验证。我转到“编辑用户”表单，但无法初始化它。 bool 属性已设置，但没有任何效果 - 复选框未选中。您可以在这里自己尝试一下: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']
                }
            };
        },
    },
});

应用程序.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 ——因此它发出 true 或 false 而不是整个事件

我必须在复选框上添加 :value="value" ，因为显然 VeeValidate 需要 v-model 或 :value 作为提示，文档发现 here .