Перейти к содержимому
Логотип AlpineJS Логотип AlpineJS Alpine.js по-русски  

x-init

Директива x-init позволяет вам подключиться к фазе инициализации любого элемента в Alpine.

<div x-init="console.log('Инициализируюсь!')"></div>

В приведённом выше примере «Инициализируюсь!» будет выведено в консоль перед дальнейшими обновлениями DOM.

А вот другой пример, где x-init используется для получения некоторого JSON и сохранения его в x-data перед обработкой компонента:

<div
  x-data="{ posts: [] }"
  x-init="posts = await (await fetch('/posts')).json()"
>...</div>

$nextTick

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

Это будет что-то вроде useEffect(..., []) в React или mount во Vue.

Используя внутреннюю магию Alpine $nextTick, вы можете добиться этого.

<div x-init="$nextTick(() => { ... })"></div>
Подробнее о $nextTick

Автономный x-init

Вы можете добавить x-init к любым элементам внутри или за пределами HTML-блока x-data. Например:

<div x-data>
  <span x-init="console.log('Инициализируюсь!')"></span>
</div>


<span x-init="console.log('Я тоже инициализируюсь!')"></span>


<strong>Загляните в консоль</strong>
Загляните в консоль

Автовыполнение метода init()

Если объект x-data компонента содержит метод init(), он будет вызван автоматически. Например:

<div
  x-data="{
    init() {
        console.log('Я запущен автоматически!')
    }
}"
>
  ...
</div>

Это также относится к компонентам, которые были зарегистрированы с использованием синтаксиса Alpine.data().

Alpine.data('dropdown', () => ({
  init() {
    console.log('Я запускаюсь при инициализации каждого компонента «выпадающего списка».');
  },
}));

Если у вас есть объект x-data, содержащий метод init() и директиву x-init, метод x-data будет вызываться перед директивой.

<div
  x-data="{
        init() {
            console.log('Я запустился первым!')
        }
    }"
  x-init="console.log('Я запустился вторым!')"
>
  ...
</div>

Проверка знаний

  1. Как выполнить какой-то код в Alpine только после отрисовки элемента?

  2. Какая из строчек отобразится в консоли?

    <span x-init="console.log('Строчка 2')"></span>
    

    <div x-data>
      <span x-init="console.log('Строчка 1')"></span>
    </div>