如何重置父 onclick 中的所有其他嵌套数据 Alpine.js

Question

我有多个组，每个组内有多个选择。当我单击组内的一个选项时，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>

Answer 1

示例存在三个问题。首先，由于事件冒泡，我们需要使用 .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)，我将在示例中使用 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>

如何重置父 onclick 中的所有其他嵌套数据 Alpine.js

How to reset all other nested data inside parent onclick Alpine.js

javascript

html

alpine.js