CODEWITHSUNDEEP
javascriptalpine.js
Silver22
Silver22

Reputation: 35

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

enter image description here

Upvotes: 1

Views: 2912

Answers (1)

Dauros
Dauros

Reputation: 10502

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/[email protected]/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>

Upvotes: 2

Related Questions