时间戳

首页 > 解决方案 > Livewire + AlpineJS：使用 x-data 作为连线：单击参数

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

问题描述

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

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

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

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

提前致谢。

标签： laravellaravel-bladelaravel-livewirealpine.js

解决方案

您可以使用带有魔法 $wire 的 Alpine 点击监听器，如下所述： 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>

推荐阅读