Использование событий x-on Alpine.js в компоненте Astro.js

Question

Я пытаюсь создать несколько простых вещей с помощью Astro.js для шаблонов HTML и Alpine.js для интерактивности, когда это необходимо. Я наткнулся на проблему с попыткой использовать события Alpine x-on на компоненте Astro.

Вот пример использования компонента Button:

        <div x-data>
    <Button @click="console.log('Clicked astro')">Click me</Button>
    <button @click="console.log('Clicked normal button')">Click me</button>
  </div>

Первая не работает, а родная кнопка работает как обычно.

Компонент кнопки — это просто элемент кнопки с некоторыми классами попутного ветра, ничего особенного:

      <button class="border-[1px] rounded-lg transition px-6 py-2 hover:text-inherit hover:border-transparent">
  <slot />
</button>

Как я могу заставить его работать? Мне очень нравится астро с альпийским до сих пор, но эта мелочь мешает мне использовать его для моего проекта.

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

Answer 1

Я связался со службой поддержки Astro в разногласиях, и там мне ответил пользователь happydev:

Все, что передается астро-компоненту, подобно этому, воспринимается как опора, поэтому вам нужно передать его элементу, к которому вы хотите привязать событие.

Что-то вроде этого