Динамика AlpineJS - Дирректива x-data

Все в Alpine начинается с директивы x-data, которая определяет фрагмент HTML как компонент Alpine и предоставляет реактивные данные для ссылки на этот компонент.

Свойства, определенные в директиве x-data, доступны всем дочерним элементам. Даже внутри других вложенных компонентов x-data.vНапример:

<div x-data="{ foo: 'bar' }">
  <span x-text="foo"><!-- Отрендерит как: "bar" --></span>

  <div x-data="{ bar: 'baz' }">
    <span x-text="foo"><!-- Отрендерит как: "bar" --></span>

    <div x-data="{ foo: 'bob' }">
      <span x-text="foo"><!-- Отрендерит как: "bob" --></span>
    </div>
  </div>
</div>

Поскольку x-data оценивается как обычный объект JavaScript, то помимо переменных в нём можно хранить методы и даже геттеры. Например, давайте выделим поведение «Переключить содержимое» в метод x-data.

<div x-data="{ open: false, toggle() { this.open = !this.open } }">
  <button @click="toggle()">Переключить содержимое</button>

  <div x-show="open">Содержимое...</div>
</div>

Иногда удобно реализовать один метод, который возвращает данные на основе другого состояния, такие методы в JavaScript называются геттерами.

<div
  x-data="{
    open: false,
    get isOpen() { return this.open },
    toggle() { this.open = !this.open },
}"
>
  <button @click="toggle()">Переключить содержимое</button>

  <div x-show="isOpen">Содержимое...</div>
</div>