Question

2020-10-13

5428

laravel laravel-blade laravel-livewire alpine.js

我有一个 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

您可以将 Alpine 点击监听器与 magic $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>

Answer 2

将 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 组件。