Alpine.js 单选按钮上的 x-model 问题

Question

我对 Alpine.js 有疑问。我有 2 个 HTML 块具有相同的 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>

当页面上只使用其中一个时，它可以正常工作。但是当我把它们都放好时，第一个开始处理一个问题：要检查收音机输入，你需要双击它。但模型在第一次点击后更新。请检查短 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>

Alpine.js 单选按钮上的 x-model 问题

Alpine.js issue with x-model on radio button

javascript

alpine.js