Livewire + AlpineJS：使用 x-data 作为连线：单击参数答案

【问题标题】：Livewire + AlpineJS: Using x-data as wire:click paramLivewire + AlpineJS：使用 x-data 作为连线：单击参数
【发布时间】：2021-01-28 01:47:34
【问题描述】：

我有一个 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 堆栈开始，我还不知道最佳工作流程。

提前致谢。

【问题讨论】：

laravel-livewire.com/docs/2.x/alpine-js 在“Livewire 和 Alpine 之间共享状态：@entangle”下，有帮助吗？
好的，谢谢。以@entangle 结尾，将组件内的属性链接到 AlpineJS 代码。

【解决方案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 组件。

【讨论】：

【解决方案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>

【讨论】：