0

我是 Vue3 的新手。Ik 已经开始在 Vue js 中制作一些表单输入字段组件，以便在我的 Laravel 8 项目中使用它。除了“接受政策”的复选框组件外，一切正常。它认为解决问题非常简单，但我在 Vue.js 中很新，所以我看不到问题。

Laravel 注册请求：

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

注册表（仅接受政策复选框）

<Checkbox name="policy_accepted" id="policy_accepted" :errors="errors" @update:field="fields.policy_accepted=$event"/>

Vue Checkbox 组件：

<template>
    <div class="custom-control custom-checkbox">
        <input class="custom-control-input"
               :id="id"
               :name="name"
               type="checkbox"
               v-model="value"
               @input="updateField()"
        >
        <label class="custom-control-label" :for="id">
            I accept <a class="text-bold text-underline" target="_blank" title="privacy policy">the policy</a>
        </label>
        <div class="invalid-feedback" v-text="errorMessage()"></div>
    </div>
</template>

<script>
export default {
    name: "Checkbox",
    props: [
        'name',
        'id',
        '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 说：它是假的，如果它没有被选中，它就通过了验证！这怎么可能？

4

0 回答 0