Al cargar alpinejs, desmarca todas las casillas de verificación, no sé por qué lo hace, pero lo es.
<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>Entonces, al cargar el código anterior, necesito que se verifique el naranja, pero no es así. ¿alguien sabe que esta pasando aqui?
Debe agregar comillas simples en la matriz ['orange'] y no necesita :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>