Vue 3 复选框组件在 laravel 作为复选框（接受条款）的情况下不起作用

Question

我正在开发一个使用 vue 3 的 laravel 9 项目。对于每个表单输入，字段 components.Everything 工作正常，除了注册复选框（接受条款）。如果在vue中正常使用checkbox，是没问题的。一旦组件由它制成，它就不再有效。通过单击打开和关闭复选框，我收到需要接受条款的消息！

希望你能帮我解决这个问题

-Vue注册表组件

<template>
    <form class="text-left" method="post" @submit.prevent="submit()">
        <div class="alert alert-success mb-1" v-if="success" v-html="successMessage"></div>
        <div class="alert alert-danger mb-1" v-if="errors.message" v-html="errors.message"></div>

        <InputFieldWithoutIcon ref="email" type="email" name="email" label="E-mail" :errors="errors" @update:field="fields.email=$event"/>
        <InputFieldWithoutIcon ref="password" type="password" name="password" label="Password" :errors="errors" @update:field="fields.password=$event"/>
        <InputFieldWithoutIcon ref="password_confirmation" type="password" name="password_confirmation" label="Password Confirmation" :errors="errors" @update:field="fields.password_confirmation=$event"/>
        <Checkbox :text="newsletter_text" name="newsletter" type="checkbox" :errors="errors" @update:field="fields.newsletter=$event"/>
        <Checkbox :text="policy_text" name="policy_accepted" type="checkbox" :errors="errors" @update:field="fields.policy_accepted=$event"/>
        
        <SubmitButtonWithoutIcon name="create account" type="submit" custom_btn_class="btn-block btn-primary" custom_div_class=""/>
    </form>
</template>

<script>
import InputFieldWithoutIcon from "../components/InputFieldWithoutIcon";
import SubmitButtonWithoutIcon from "../components/SubmitButtonWithoutIcon";
import Checkbox from "../components/Checkbox";

export default {
    name: "RegistrationUser",
    components: {
        InputFieldWithoutIcon,
        SubmitButtonWithoutIcon,
        Checkbox
    },
    data() {
        return {
            fields: {
                email: '',
                password: '',
                password_confirmation: '',
                policy_accepted: '',
                newsletter: '',
            },
            errors: {},
            success: false,
            successMessage: '',
            newsletter_text: 'I want to receive newsletters',
            policy_text: 'I accept <a class="text-bold text-underline" href="" target="_blank" title="privacy policy">the policy</a>',
        }
    },
    methods: {
        submit() {
            axios.post('/api/registration', this.fields)
                .then(response => {
                    if (response.status === 200) {

                        this.$refs.email.value = null;
                        this.$refs.password.value = null;
                        this.$refs.password_confirmation.value = null;

                        this.fields = {
                            email: '',
                            password: '',
                            password_confirmation: '',
                            policy_accepted: '',
                            newsletter: '',
                        };

                        this.errors = {};
                        this.success = true;
                        this.successMessage = response.data.message;
                    }
                }).catch(errors => {
                if (errors.response.status === 422 || errors.response.status === 401) {
                    this.errors = errors.response.data.errors;
                }
            });
        }
    }
}
</script>

-Vue复选框组件

<template>
    <div class="custom-control custom-checkbox">
        <input class="custom-control-input"
               :id="name"
               :name="name"
               :type="type"
               v-model="value"
               @input="updateField()"
        >
        <label class="custom-control-label" :for="name">
            {{ text }}
        </label>
        <div class="invalid-feedback" v-text="errorMessage()"></div>
    </div>
</template>

<script>
export default {
    name: "Checkbox",
    props: [
        'name',
        'type',
        'text',
        'errors'
    ],
    data: function () {
        return {
            value: false
        }
    },
    computed: {
        hasError: function () {
            return this.errors && this.errors[this.name] && this.errors[this.name].length > 0;
        }
    },
    methods: {
        updateField: function () {
            this.clearErrors(this.name);
            this.$emit('update:field', this.value)
        },
        errorMessage: function () {
            if (this.errors && this.errors[this.name]) {
                return this.errors[this.name][0];
            }
        },
        clearErrors: function () {
            if (this.hasError) {
                this.errors[this.name] = null;
            }
        }
    }
}
</script>

-Laravel 申请注册

public function rules(): array
    {
        return [
            'email' => 'required|email|unique:users',
            'password' => 'required|confirmed|min:8',
            'newsletter' => 'nullable|boolean',
            'policy_accepted' => 'accepted'
        ];
    }

Answer 1

我找到了解决办法。在复选框模板中，我没有使用 @input="updateField()"，而是将其替换为 @change="updateField()" 就这些！

Vue 3 复选框组件在 laravel 作为复选框（接受条款）的情况下不起作用

Vue 3 checkbox component does not work in laravel as checkbox (Accept terms) situation

laravel

vue.js

vue-component

vuejs3

laravel-9