Как сбросить все другие вложенные данные внутри родителя onclick Alpine.js

У меня есть несколько групп и несколько вариантов внутри каждой группы. Когда я нажимаю на выбор внутри группы, groupcount всегда должен + 1, а щелкнутый choicecount должен быть установлен на 1, а другие choicecount внутри группы должны быть сброшены на 0.

Я пытался использовать $dispatch, чтобы сбросить все choicecount внутри группы до 0 перед установкой choicecount = 1 и groupcount++, но $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/[email protected]/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>

javascript html alpine.js

06.05.2022 00:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В примере есть три проблемы. Во-первых, из-за всплытия событий нам нужно использовать .window модификатор для прослушивателей событий. Во-вторых, CamelCasing не поддерживается внутри атрибутов HTML, поэтому нам нужно использовать тире в имени события (или использовать .camel модификатор), я буду использовать reset-group в примере. Последняя проблема заключается в том, что событие сброса теперь действует на каждую группу, поэтому нам нужно ограничить его область действия текущей группой. Для этого я добавил свойство groupid в каждую группу, которое является уникальным и также включено в событие, поэтому мы можем проверить его значение внутри прослушивателя событий с помощью if (groupid == $event.detail) choicecount=0 перед сбросом группы.

<script src = "https://unpkg.com/[email protected]/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>

06.05.2022 07:52

Другие вопросы по теме

Извлечь определенную строку с веб-страницы с помощью Beautiful Soup

Невозможно выделить поля и значения курсивом в html/jinja2

Проблема с фоновым изображением css и шрифтами с хостингом

Как расположить эти div друг над другом

Трудности с центрированием элементов Navbar UL по вертикали

Отображение сетки css, которое размещает как можно больше элементов div в строке

Очистить старые результаты перед загрузкой новых результатов запроса в javascript

Как создать нечетный/четный цветной список с модулем в Javascript?

For in loop не заполняет выпадающий список

Как я могу добавить 2 пути html в свой «tailwind.config.js»? Попутный ветер

Как сбросить все другие вложенные данные внутри родителя onclick Alpine.js

Ответы 1

Другие вопросы по теме

Похожие вопросы