$refs

$refs — это магическое свойство, которое может быть использовано для получения элементов DOM, помеченных x-ref внутри компонента. Это удобно, когда необходимо вручную манипулировать элементами DOM. Оно часто используется как более лаконичная и расширенная альтернатива document.querySelector.

<div x-data>
  <button x-on:click="$refs.text.remove()">Удалить текст</button>
  <div class="pt-4" x-ref="text">Привет👋</div>
</div>

Удалить текст

Привет👋

Теперь при нажатии кнопки элемент <div> будет удаляться.

Ограничения

В Alpine v2 можно было динамически привязывать $refs к элементам, как показано ниже:

<div x-data="{ items: [{ id: 1, name: 'Первый' }, { id: 2, name: 'Второй' }] }">
  <template x-for="item in items" :key="item.id">
    <div :x-ref="item.name">какой-то контент...</div>
  </template>
</div>

Однако в v3 доступ к $refs возможен только для элементов, которые создаются статически. Итак, для примера выше: если вы ожидали, что значение item.name внутри $refs будет что-то вроде Первый, то знайте, что $refs будет содержать литеральную строку 'item.name', а не Первый.