Выявление скрытых элементов из раскрывающегося списка с помощью Alpine.js

Question

Я использую Alpine.js на сайте, и я хочу, чтобы раскрывающийся список с вариантами отображения / скрытия с помощью alpine, но также, когда вы нажимаете на один из вариантов, он скрывает / показывает блоки контента дальше по странице.

Пока у меня есть это:

<div x-data="{ open: false }">
  <button @click="open = !open">Dropdown</button>
  <ul
    x-show="open"
    @click.away="open = false"
  >
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
  </ul>
</div>

Как мне это изменить, чтобы при нажатии на раскрывающийся список отображался связанный с ним элемент?

Похоже, что x-data Атрибут должен заключать в оболочку как элемент, на который щелкнули, так и элемент, который будет отображаться, но я не могу вложить дополнительный контент, который хочу показать, в элементы раскрывающегося списка.

Answer 1

Похоже, что x-data Атрибут должен заключать в оболочку как элемент, на который щелкнули, так и элемент, который будет отображаться, но я не могу вложить дополнительное содержимое, которое хочу показать, в элементы раскрывающегося списка.

Это один из способов сделать это, когда вы сохраняете "выбранный элемент" в том же компоненте Alpine.js, очевидно, вы упоминаете, что это не соответствует вашим целям.

Есть две альтернативы: во-первых, использование настраиваемых событий для связи между компонентами Alpine.js (это единственный собственный способ Alpine.js для этого). Второй - использовать пакет Spruce для создания глобальных хранилищ для совместного использования состояния. Я не буду здесь рассматривать подход Spruce, он должен состоять из установки состояния глобального хранилища в одном компоненте и использования его из другого компонента.

Чтобы использовать настраиваемые события, в раскрывающемся списке, щелкнув ссылки (теги привязки), вы можете использовать $dispatch свойство magic (которое является просто оболочкой для CustomEvent/dispatchEvent) для отправки настраиваемого события с любыми значениями данных, которые вы хотите (они будут храниться в customEvent.detail).

В вашем "принимающем" компоненте Alpine.js вы должны прослушивать "настраиваемое событие" в окне / документе, используя .window или .documentмодификатор соответственно. Когда запускается прослушиватель настраиваемого события, вы можете получить доступ$event.details (Обратите внимание, что $event является "волшебным свойством") и прочитайте все данные, которые были переданы во время отправки события.

<div x-data="{ open: false }">
  <button @click="open = !open">Dropdown</button>
  <ul
    x-show="open"
    @click.away="open = false"
  >
    <li><a href="#" @click="$dispatch('dropdown-select', { element: 'one' })">One</a></li>
    <li><a href="#" @click="$dispatch('dropdown-select', { element: 'two' })">Two</a></li>
  </ul>
</div>
<div x-data="{ selected: '' }" @dropdown-select.window="selected = $event.detail.element">
  <div x-show="selected === 'one'">One showing</div>
  <div x-show="selected === 'two'">Two showing</div>
</div>

Вы можете увидеть, как приведенный выше пример работает в следующем CodePen.