alpinejs Checkbox checked on init or based on x-modal not working

user_3405566 0
Viewed 4047

When loading alpinejs it uncheckes all checkboxes, i don't know why it is doing so but it is.

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

So when loading the code above I need orange to be checked, but it doesn't. does somebody knows whats going on here?

alpine.js forms arrays html javascript
1 Answers

You need to add single quote in the array ['orange'] and you don't need the :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>

user_61947860
Related