复选框在 Laravel Nova 自定义工具中不起作用

Question

所以我是 Laravel Nova 的新手，现在正在尝试使用自定义工具。

在我的自定义工具中，我的 tool.vue 组件中有一个复选框。我使用 laravel nova 中已经可用的 vue 复选框组件。

<checkbox/>

复选框以应有的形式出现，但是当我单击它时，没有任何反应。它没有得到检查，组件的切换事件也不会触发。

提前致谢。

Answer 1

Laravel Nova 提供的 Checkbox Vue 组件接受一个属性来确定是否选中了父组件的复选框，并且仅在单击复选框时发出一个名为 input 的事件，这就是复选框的原因单击它时不会被检查。
这是位于nova/resources/js/components/Index/Checkbox.vue的组件

<template>
    <div class="flex items-center">
        <div
            :disabled="disabled"
            class="checkbox select-none rounded"
            tabindex="0"
            role="checkbox"
            :aria-checked="checked"
            @keydown.prevent.space.enter="toggle"
            @click="toggle"
        >
            <input class="hidden" type="checkbox" :checked="checked" :disabled="disabled" />

            <div class="check">
                <svg
                    class="block"
                    v-if="checked"
                    width="20"
                    height="20"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                >
                    <g id="Page-1" fill="none" fill-rule="evenodd">
                        <g id="checkbox-on" fill-rule="nonzero">
                            <g id="b-link" fill="var(--primary)">
                                <rect id="b" width="20" height="20" rx="4" />
                            </g>
                            <path
                                id="Shape"
                                fill="#FFF"
                                d="M7.7 9.3c-.23477048-.3130273-.63054226-.46037132-1.01285927-.37708287-.38231702.08328846-.68093514.38190658-.7642236.7642236C5.83962868 10.0694577 5.9869727 10.4652295 6.3 10.7l2 2c.38884351.3811429 1.01115649.3811429 1.4 0l4-4c.3130273-.23477048.4603713-.63054226.3770829-1.01285927-.0832885-.38231702-.3819066-.68093514-.7642236-.7642236C12.9305423 6.83962868 12.5347705 6.9869727 12.3 7.3L9 10.58l-1.3-1.3v.02z"
                            />
                        </g>
                    </g>
                </svg>
                <svg
                    class="block"
                    v-else
                    width="20"
                    height="20"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                >
                    <g id="Page-1" fill="none" fill-rule="evenodd">
                        <g id="checkbox-off">
                            <g id="b-link" fill="#FFF" fill-rule="nonzero">
                                <rect id="b" width="20" height="20" rx="4" />
                            </g>
                            <rect
                                id="Rectangle-path"
                                width="19"
                                height="19"
                                x=".5"
                                y=".5"
                                stroke="#CCD4DB"
                                rx="4"
                            />
                        </g>
                    </g>
                </svg>
            </div>
        </div>

        <slot />
    </div>
</template>

<script>
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false,
        },
        checked: {
            // type: Boolean,
            default: false,
        },
    },

    methods: {
        toggle(event) {
            this.$emit('input', !this.checked)
        },
    },
}
</script>

所以你需要做的是监听点击事件并将数据作为道具传递，就像这样 ParentComponent.vue

<template>
  <form>
    <checkbox @input="toggle" :checked="checked"/>
  </form>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
    }
  },
  methods: {
    toggle() {
      this.checked = !this.checked;
    }
  }
}
</script>

希望对你有帮助