这个例子有三个问题。首先，由于事件冒泡，我们需要在事件侦听器上使用
我有多个组，每个组中有多个选择。当我点击组内的一个选项时，groupcount应该总是+ 1，点击的choicecount应该设置为1，而组内的其他choicecount应该重置为0。
在设置choicecount = 1和groupcount++之前，我尝试使用$dispatch将组内的所有choicecount重置为0，但$dispatch似乎不会触发组内其他嵌套的choicecount。
例如，在下面的代码片段中(第1组):G1 Option 1,G1 Option 2,G1 Option 3每次只允许一个等于1。如果G1 Option 2= 1，那么G1 Option 1和G1 Option 3应该= 0。groupcount工作正常
注意:这是剥离的，单选按钮不适合我正在创建的功能，我不使用x-for，因为这些组和选择将从PHP循环生成。分组和选择的数量会有所不同。
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- GROUP 1 -->
<div x-data="{ groupcount: 0 }">
<label>Group 1 Count</label>
<input x-model="groupcount" type="text">
<div x-data="{ choicecount: 0 }">
<div x-on:resetAllCountsInGroup="choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('resetAllCountsInGroup'),choicecount=1,groupcount++">
G1 Option 1
</button>
</div>
</div>
<div x-data="{ choicecount: 0 }">
<div x-on:resetAllCountsInGroup="choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('resetAllCountsInGroup'),choicecount=1,groupcount++">
G1 Option 2
</button>
</div>
</div>
<div x-data="{ choicecount: 0 }">
<div x-on:resetAllCountsInGroup="choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('resetAllCountsInGroup'),choicecount=1,groupcount++">
G1 Option 3
</button>
</div>
</div>
</div>
<hr>
<!-- GROUP 2 -->
<div x-data="{ groupcount: 0 }">
<label>Group 2 Count</label>
<input x-model="groupcount" type="text">
<div x-data="{ choicecount: 0 }">
<div x-on:resetAllCountsInGroup="choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('resetAllCountsInGroup'),choicecount=1,groupcount++">
G2 Option 1
</button>
</div>
</div>
<div x-data="{ choicecount: 0 }">
<div x-on:resetAllCountsInGroup="choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('resetAllCountsInGroup'),choicecount=1,groupcount++">
G2 Option 2
</button>
</div>
</div>
</div>
<hr>
<!-- GROUP 3 -->
<div x-data="{ groupcount: 0 }">
<label>Group 3 Count</label>
<input x-model="groupcount" type="text">
<div x-data="{ choicecount: 0 }">
<div x-on:resetAllCountsInGroup="choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('resetAllCountsInGroup'),choicecount=1,groupcount++">
G3 Option 1
</button>
</div>
</div>
<div x-data="{ choicecount: 0 }">
<div x-on:resetAllCountsInGroup="choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('resetAllCountsInGroup'),choicecount=1,groupcount++">
G3 Option 2
</button>
</div>
</div>
</div>.window修饰符。其次，HTML属性中不支持camel大小写，因此我们需要在事件名称中使用破折号(或使用.camel修饰符)，我将在示例中使用reset-group。最后一个问题是，重置事件现在作用于每个组，因此我们需要将其范围限制为当前组。为此，我为每个组添加了一个groupid属性，这是唯一的，它也包含在事件中，因此我们可以在重置组之前使用if (groupid == $event.detail) choicecount=0在事件侦听器中检查其值。
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ groupcount: 0, groupid: 1 }">
<label>Group 1 Count</label>
<input x-model="groupcount" type="text">
<div x-data="{ choicecount: 0 }">
<div x-on:reset-group.window="if (groupid == $event.detail) choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('reset-group', groupid),choicecount=1,groupcount++">
G1 Option 1
</button>
</div>
</div>
<div x-data="{ choicecount: 0 }">
<div x-on:reset-group.window="if (groupid == $event.detail) choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('reset-group', groupid),choicecount=1,groupcount++">
G1 Option 2
</button>
</div>
</div>
<div x-data="{ choicecount: 0 }">
<div x-on:reset-group.window="if (groupid == $event.detail) choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('reset-group', groupid),choicecount=1,groupcount++">
G1 Option 3
</button>
</div>
</div>
</div>
<div x-data="{ groupcount: 0, groupid: 2 }">
<label>Group 2 Count</label>
<input x-model="groupcount" type="text">
<div x-data="{ choicecount: 0 }">
<div x-on:reset-group.window="if (groupid == $event.detail) choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('reset-group', groupid),choicecount=1,groupcount++">
G2 Option 1
</button>
</div>
</div>
<div x-data="{ choicecount: 0 }">
<div x-on:reset-group.window="if (groupid == $event.detail) choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('reset-group', groupid),choicecount=1,groupcount++">
G2 Option 2
</button>
</div>
</div>
<div x-data="{ choicecount: 0 }">
<div x-on:reset-group.window="if (groupid == $event.detail) choicecount=0">
<input x-model="choicecount" type="text">
<button type="button" x-on:click="$dispatch('reset-group', groupid),choicecount=1,groupcount++">
G2 Option 3
</button>
</div>
</div>
</div>