Issue
I have multiple groups and multiple choices inside each group. When I click on a choice inside a group the groupcount
should always + 1 and the clicked choicecount
should be set to 1 while the other choicecount
's inside the group should be reset to 0.
I have tried using $dispatch
to reset all choicecount
's inside the group to 0 before setting choicecount = 1
and groupcount++
, but $dispatch
doesn't seem to trigger the other nested choicecount
's inside the group.
For example, in the snippet below (Group 1):
Only one of G1 Option 1
, G1 Option 2
, G1 Option 3
should be allowed to equal 1 at a time.
If G1 Option 2
= 1 then G1 Option 1
and G1 Option 3
should = 0. The groupcount
's are working fine.
Note: This is stripped down, radio buttons aren't suitable for the feature I'm creating and I'm not using x-for
because these groups and choices will be generated from a PHP loop. The number of groups and choices will vary.
<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>
Solution
There are three issues with the example. First, due to event bubbling, we need to use the .window
modifier on the event listeners. Second, camelCasing is not supported inside HTML attributes, so we need to use dashes in the event name (or use the .camel
modifier), I will use reset-group
in the example. The last issue is that the resetting event now acts on every group, so we need to limit its scope to the current group. For that, I added a groupid
property to each group, which is unique and it is included in the event as well, so we can check its value inside the event listener with if (groupid == $event.detail) choicecount=0
before resetting a group.
<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>
Answered By - Dauros
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.