x-modelable

x-modelable позволяет сделать состояние Alpine целью директивы x-model.

Вот простой пример использования x-modelable для привязки переменной к x-model:

<div x-data="{ number: 5 }">
  <div x-data="{ count: 0 }" x-modelable="count" x-model="number">
    <button @click="count++">Увеличить <span x-text="number"></span></button>
  </div>
</div>

Как вы можете видеть, свойство внешней области «number» теперь привязано к свойству внутренней области «count».

Обычно эта функция используется в сочетании с серверной платформой шаблонов, такой как Laravel Blade. Это полезно для абстрагирования компонентов Alpine в шаблоны серверной части и предоставления доступа к состоянию извне через x-model, как если бы это был собственный ввод.

Поддерживаемые значения

x-modelable сохраняет внутреннее и внешнее состояние независимыми, клонируя значения как JSON. Поэтому он предназначен для совместимых с JSON состояний, таких как строки, числа, булевы значения, null, массивы и обычные объекты, содержащие такие значения.

Объекты браузера и другие состояния, которые нельзя представить в формате JSON, не будут корректно передаваться через эту границу. Например, File теряет такие свойства, как имя, размер и тип. То же ограничение распространяется на такие значения, как FileList, Map, Set, Date, экземпляры классов и DOM-узлы.

Для пользовательского поля ввода, которое возвращает одно из таких значений, не используйте x-modelable, а вместо этого отправляйте событие input. x-model считывает значение непосредственно из события, не клонируя его:

<div x-data="{ files: [] }">
    <div x-model="files">
        <input
            type="file"
            multiple
            @change="$dispatch('input', Array.from($event.target.files))"
        >
    </div>
    <template x-for="file in files" :key="file.name">
        <p x-text="file.name"></p>
    </template>
</div>