AlpineJS初始化时Checkbox默认勾选失效、x-model绑定异常问题求助

• 核心错误是x-data中定义colors数组时，orange没有加引号，被Alpine识别为未定义的变量而非字符串值，实际初始化后colors的值为[undefined]，无法匹配到value为orange的复选框，自然不会触发勾选。
• 额外添加的:checked属性属于冗余配置，Alpine的x-model绑定数组型复选框时会自动根据值匹配控制选中状态，手动声明的checked属性反而可能和x-model的自动状态控制产生初始化冲突。

修改两处代码即可：

1. 给x-data中的orange添加单引号，声明为字符串类型
2. 删除多余的:checked属性

修正后的完整代码如下：

<div x-data="{ colors: ['orange'] }">
    <input type="checkbox" value="red" x-model="colors">
    <input type="checkbox" value="orange" x-model="colors">
    <input type="checkbox" value="yellow" x-model="colors">
    <div class="pt-4">Colors: <span x-text="colors"></span>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Kevon