获取切换元素的值

Question

我正在使用 AlpineJS 构建一个 blade 切换组件。这个想法是，您可以 enable/disable UI 切换，然后将放置一个不可见的复选框 on/on

toggle.blade.php:

<div x-data="{on: false}">
    <button type="button" @click="on = !on" :class="{'bg-cyan-600' : on, 'bg-gray-200' : !on}">
        <span :class="{'translate-x-5' : on, 'translate-x-0' : !on}" class="..."></span>
    </button>

    <input type="checkbox" name="{{$name}}" x-model="on" value="on" class="hidden" />
</div>

目前为止一切正常。我可以将切换器放在我的表单中并切换它：

<x-toggle name="test" />

但现在我希望其他元素与此切换按钮交互。例如，通过打开 test-toggle 使另一个输入字段可见。

所以它需要像这样工作：

<div x-data="{show: false}">
    <x-toggle name="test" x-model="show" />
    
    <div x-show="show">
        <!-- input elements -->
    </div>
</div>

我怎样才能做到这一点？

Answer 1

这是一个有两个 alpine 组件的场景，我们需要组件间通信来实现功能。

由于alpine.js不支持访问父组件或子组件，我们可以利用事件来处理。

我们可以在 toggle.blade.php 中 watch on 属性并发出具有更新值的事件。

toggle.blade.php:

<div x-data="{on: false}" x-init="$watch('on', val => $dispatch('toggle',val))">
    <button type="button" @click="on = !on" :class="{'bg-cyan-600' : on, 'bg-gray-200' : !on}">
        <span :class="{'translate-x-5' : on, 'translate-x-0' : !on}" class="..."></span>
    </button>

    <input type="checkbox" name="{{$name}}" x-model="on" value="on" class="hidden" />
</div>

现在在父级中，我们可以监听事件 toggle 并相应地设置 show 属性。

<div x-data="{show: false}" @toggle="show = $event.detail">
    <x-toggle name="test" />
    
    <div x-show="show">
        <!-- input elements -->
    </div>
</div>

现在父级将监听切换事件并更新数据属性。

这是在 alphine.js 中处理组件间通信的最简单方法。

但是有一个选项可以用 states 来处理它。请参阅此以获取更详细的说明。

获取切换元素的值

Get value of a toggle element

javascript

laravel-blade

alpine.js