alpinejs Checkbox 在 init 上选中或基于 x-modal 不工作
alpinejs Checkbox checked on init or based on x-modal not working
加载 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>
所以当加载上面的代码时,我需要检查橙色,但它没有。有人知道这里发生了什么吗?
您需要在数组中添加单引号 ['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>
加载 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>
所以当加载上面的代码时,我需要检查橙色,但它没有。有人知道这里发生了什么吗?
您需要在数组中添加单引号 ['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>