$el, $event и $nextTick

Магические свойства — переменные со знаком $, которые Alpine подставляет в каждое выражение. Вы уже встречали $refs. Здесь — три самых нужных: элемент, событие и ожидание обновления страницы.

$el

$el — элемент, на котором стоит директива:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data>
  <button @click="$el.textContent = 'Готово'">Отметить</button>
</div>

После клика надпись на кнопке меняется на «Готово». В рабочем коде текст лучше хранить в данных и выводить через x-text, а $el оставлять для случаев вроде фокуса или размеров элемента.

$event

$event — объект события, тот же, что получает функция в addEventListener. Из него берут введённое значение, нажатую клавишу, координаты:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data>
  <input @keydown="console.log($event.key)" placeholder="Нажимайте клавиши">
</div>

Каждая нажатая клавиша выводится в консоль под примером: a, Enter, Backspace.

Если обработчик — метод без скобок, Alpine передаст событие первым аргументом:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{
  search: '',
  update(event) {
    this.search = event.target.value;
  }
}">
  <input @input="update" placeholder="Поиск задачи">
  <p x-text="'Ищем: ' + search"></p>
</div>

Запись @input="update" равна @input="update($event)".

$nextTick

Alpine обновляет страницу не мгновенно, а сразу после того, как закончит выполняться текущий код. $nextTick откладывает функцию до момента, когда обновление уже произошло:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ tasks: ['Купить молоко'] }">
  <button @click="
    tasks.push('Позвонить Олегу');
    console.log('Сразу:', $refs.list.children.length);
    $nextTick(() => console.log('После обновления:', $refs.list.children.length));
  ">Добавить</button>
  <ul x-ref="list">
    <template x-for="task in tasks">
      <li x-text="task"></li>
    </template>
  </ul>
</div>

После первого клика консоль показывает «Сразу: 2» и «После обновления: 3». Детей у списка на один больше, чем задач, потому что в нём лежит и сам <template>. Главное — новый <li> появляется только к моменту $nextTick.

Другие магические свойства

О $dispatch и $watch — следующий урок, о $store — урок о глобальном состоянии.

Частая ошибка

Ждать, что this.$el внутри метода — это кнопка, по которой кликнули. В методах из x-data свойство this.$el указывает на корневой элемент компонента, тот, где стоит x-data. Чтобы получить кнопку, передайте её явно — @click="mark($el)" — или возьмите $event.target из события.