Переменные отправки / отправки Livewire Alpinejs в файлах

Как я могу генерировать и распознавать изменения из дочерних компонентов (в отдельных файлах) с помощью AlpineJS?

Я пытаюсь создать форму в Livewire / alpinejs, которая будет отображать только следующий шаг после выбора значения на предыдущем шаге.

Я знаю, что могу использовать livewire model / emitUp для отслеживания изменений дочернего компонента selectfield, а затем соответственно использовать x-show. Однако выдача происходит довольно медленно, ожидание около 5 секунд после выбора каждого поля выбора не очень удобно для пользователя. Следовательно, пользователь AlpineJs.

Проблема в том, что x-данные ограничены локально, и я не могу передать переменную и назначить ее как x-модель. AlpineJS имеет $ dispatch, но, похоже, работает только внутри файла. Поэтому я не могу отправить сообщение об изменении x-модели, а затем уловить это изменение в основной форме Livewire.

Основная форма Livewire

<div>
  <form>
    <livewire:selectfield />

    {{-- Only show this div when livewire:selectfield has selected a value (Incomplete code)--}}
    <p> 
      Should see this only when a select-field value has been selected 
    </p>
  </form>
<div>

Livewire Выбрать поле

<div x-data="{ selectedField: '' }">
  <label> Form Label </label>
  <select x-model="selectedField">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
  </select>
</div>

Есть ли способ показать / скрыть элементы div, когда в полях ввода дочернего компонента есть выбранный ввод? Предпочтительно с AlpineJS из-за удобства пользователя и меньшего количества сетевых бомбардировок.

ИЗМЕНИТЬ

Оказывается, я просто неправильно использовал функции! Игнорировать это


laravel laravel-livewire laravel-blade alpine.js
person NeedHelp101    schedule 31.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Должен неправильно прочитать документацию. Использование Livewire / AlpineJS может передавать значения от дочерних к родительским, аналогично VueJS.

HTML-код дочернего компонента должен иметь

<button type="button" @click="$dispatch('custom-event')">Test Model Update Upwards</button>

У родительского компонента есть этот html. В вашем случае просто добавьте настраиваемое событие там, где это имеет смысл.

<p @custom-event.window="console.log('Workign emit function cross child/parent')"></p>
person NeedHelp101    schedule 31.03.2021