alpinejs 复选框在 init 时选中或基于 x-modal 不起作用

Question

加载 alpinejs 时，它会取消选中所有复选框，我不知道为什么会这样做，但确实如此。

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

因此，当加载上面的代码时，我需要检查橙色，但事实并非如此。有人知道这里发生了什么事吗？

Answer 1

您需要在数组中添加单引号['orange']，并且不需要:checked...

<script src="https://unpkg.com/alpinejs@3.3.4/dist/cdn.min.js"></script>

<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>