Livewire + AlpineJS：将x数据用作电线：单击参数

Question

我有一个Laravel Blade模板，该模板具有如下定义的AlpineJS div：

<div x-data="{ id: 2 }">
   ...
   <button type="button" wire:click="deleteAddress(id)">Button</button>
</div>

我想要的是以某种方式将id变量“传递”到wire：click调用。

上面的代码在我的JS控制台中引发了Uncaught ReferenceError: id is not defined。 有任何想法吗？只是从TALL堆栈开始，我还不知道最佳的工作流程。

谢谢。

Answer 1

将一个 wire:key 添加到与 x-data 相同的 div。

<div wire:key="id" x-data="{ id: 2 }">
   ...
   <button type="button" wire:click="deleteAddress(id)">Button</button>
</div>

我认为这是因为 Livewire 只更新正在更改的内容。而 x-data div 是 alpine 组件的顶部 div。因此，如果您将 id 作为 wire:key 添加到包含 x-data 的 div 中，那么该 div 也会更新，并且它将重新运行 alpine 组件。

Answer 2

您可以将 Alpine 单击侦听器与魔法 $wire 一起使用，如下所述： https://laravel-livewire.com/docs/2.x/alpine-js

通过这种方式，您将停留在 Alpine 的“内部”，但可以访问您的 Livewire 组件方法。所以它会是：

<div x-data="{ id: 2 }">
   ...
   <button type="button" @click="$wire.deleteAddress(id)">Button</button>
</div>