0
289
ViewsAlpine.js issue with x-model on radio button
I have an issue with Alpine.js. I have 2 HTML blocks with the same x-model
<div class="filter-check">
<input x-model="resource_sector" id="sector-a6296300400e50" value="sector-a" type="radio" name="resource_sector"> <label for="sector-a6296300400e50">Sector A</label>
<input x-model="resource_sector" id="sector-b6296300400e54" value="sector-b" type="radio" name="resource_sector"> <label for="sector-b6296300400e54">Sector B</label>
<input x-model="resource_sector" id="sector-c6296300400e55" value="sector-c" type="radio" name="resource_sector"> <label for="sector-c6296300400e55">Sector C</label>
</div>
<div class="filter-check">
<input x-model="resource_sector" id="sector-a62963288132b7" value="sector-a" type="radio" name="resource_sector"> <label for="sector-a62963288132b7">Sector A</label>
<input x-model="resource_sector" id="sector-b62963288132b9" value="sector-b" type="radio" name="resource_sector"> <label for="sector-b62963288132b9">Sector B</label>
<input x-model="resource_sector" id="sector-c62963288132ba" value="sector-c" type="radio" name="resource_sector"> <label for="sector-c62963288132ba">Sector C</label>
</div>
It works without a problem when only 1 of them is used on the page. But when I place the both of them, the first one start working with an issue: to check radio input, you need to double click it. But the model updated after the first click. Please check short GIF.
Thanks, Artem
·
Juan Pablo Isaza
1 answers
Answer question0
You have to place them into different <form> tags, so they can act independently and Alpine.js will sync data between them.
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{resource_sector: ''}">
<form>
<div class="filter-check">
<input x-model="resource_sector" id="sector-a6296300400e50" value="sector-a" type="radio" name="resource_sector"> <label for="sector-a6296300400e50">Sector A</label>
<input x-model="resource_sector" id="sector-b6296300400e54" value="sector-b" type="radio" name="resource_sector"> <label for="sector-b6296300400e54">Sector B</label>
<input x-model="resource_sector" id="sector-c6296300400e55" value="sector-c" type="radio" name="resource_sector"> <label for="sector-c6296300400e55">Sector C</label>
</div>
</form>
<form>
<div class="filter-check">
<input x-model="resource_sector" id="sector-a62963288132b7" value="sector-a" type="radio" name="resource_sector"> <label for="sector-a62963288132b7">Sector A</label>
<input x-model="resource_sector" id="sector-b62963288132b9" value="sector-b" type="radio" name="resource_sector"> <label for="sector-b62963288132b9">Sector B</label>
<input x-model="resource_sector" id="sector-c62963288132ba" value="sector-c" type="radio" name="resource_sector"> <label for="sector-c62963288132ba">Sector C</label>
</div>
</form>
</div>
·
Juan Pablo Isaza
Report
Answer question