时间戳

首页 > 解决方案 > Livewire Alpinejs 跨文件发射/调度变量

laravel - Livewire Alpinejs 跨文件发射/调度变量

问题描述

如何使用 AlpineJS 发出和识别来自子组件（在单独的文件中）的更改？

我正在尝试在 Livewire/alpinejs 中构建一个表单，该表单仅在上一步中选择一个值后才显示下一步。

我知道我可以使用 livewire model/emitUp 来捕获来自 selectfield 子组件的更改，然后相应地使用 x-show。然而，发射相当慢，在选择每个选择字段后等待大约 5 秒并不是一个好的用户体验。因此 AlpineJs 的用户。

问题是 x-data 是本地范围的，我无法传递变量并将其分配为 x-model。AlpineJS 有 $dispatch，但它似乎只能在文件中工作。因此，当 x-model 发生更改时，我无法调度，然后在 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。

编辑

原来我只是没有正确使用这些功能！忽略这个

标签： laravellaravel-bladelaravel-livewirealpine.js

解决方案

必须错误地阅读文档。使用 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>

推荐阅读