将 AlpineJS 定义的数据拉入 LiveWire 组件
2021-06-11
998
我在从 Alpine 提取数据以在 LiveWire 中工作时遇到了一些问题。
代码示例
<div x-data @click="$dispatch('popup', { name: 'Hello World', drip: 'yes' })" class="border-2 border-white flex font-semibold hover:bg-yellow-400 hover:border-yellow-200 items-center justify-center p-1.5 rounded-md shadow-sm text-base text-black transition-all md:w-8/12 lg:w-6/12 bg-green-300 cursor-pointer">Click Me</div>
<div x-data="{ popupinfo: false, drip: null }" x-on:popup.window="{ popupinfo = true }" @popup.window="{ name = $event.detail.name, drip = $event.detail.drip }" x-show="popupinfo" x-cloak>
<h3 class="text-lg leading-6 font-bold text-gray-900" id="modal-title" x-text="name"></h3>
<div class="flex items-center justify-start">
<template x-if="drip == 'yes'">
<div>True</div>
</template>
<template x-if="drip == 'no'">
<div>False</div>
</template>
</div>
<div class="bg-yellow-400 flex items-center justify-between px-3 py-2 rounded-xl my-2 cursor-pointer transition-colors tracking-tight"
wire:click="$emit('addToBasket', {{ $drip }})"
@click="$dispatch('addtobasket')">
<div class="text-sm">
<span class="font-bold">2 Uploads</span> a day
</div>
<div class="bg-white font-semibold px-2 py-1 rounded-md text-sm tracking-tighter"> Monthly</div>
</div>
</div>
查看第 15 行 (wire:click="$emit('addToBasket', {{ $drip }})")。如何将 drip 数据添加到 emit。现在我已将其包装在 {{ }} 中(这是故意的)。我不知道如何为 emit 调用它。
您可以在此处查看其运行方式 https://codepen.io/bitvalentine/pen/wvJEYYX
1个回答
您可以使用 livewire
@entangle()
功能在 alpine 和 livewire 之间共享属性状态。
只需像下面这样定义您的 alpine
drip
属性并在您的 livewire 属性上设置其值
<div x-data="{ popupinfo: false, @entangle('drip') }" x-on:popup.window="{ popupinfo = true }" @popup.window="{ name = $event.detail.name, drip = $event.detail.drip }" x-show="popupinfo" x-cloak>
在您的 livewire 组件上
public $drip = null;
kenean50
2021-06-11