单选按钮上的x模型Alpine.js问题

Question

我对Alpine.js有个问题。我有两个具有相同x模型的HTML块。

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

当页面上只使用其中的一个时，它可以正常工作。但是当我把它们都放在一起时，第一个开始处理一个问题:要检查无线电输入，需要双击它。但模型在第一次单击后更新。请检查短的GIF。

谢谢你，阿特姆

​

​

Answer 1

您必须将它们放置到不同的<form>标记中，以便它们能够独立工作，Alpine.js将在它们之间同步数据。

​

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

​