Livewire 整合 alpine.js 傳遞資料

livewire 也可以跟一些前端的框架整合來傳遞資料，比如說我現在在 livewire 的 component 裡準備一個變數 $name：

public $name="Joe";

要在前端透過 alpine 去取得這個值就是利用 $wire 就可以取得了，像這樣：

<div x-data>
  <h1 x-text="$wire.name"></h1>
</div>

這時我們就能在 h1 內看到 Joe 的字樣，接著再來做一點互動，準備一個變數 $count 和一個 function increment()：

public $count = 0;
public function increment()
{
  $this->count++;
}

在前端就能像這樣觸發事件了：

<button class="btn btn-info"
            @click="$wire.increment()">add</button>
<div x-text="$wire.count"></div>

這時點擊那個按鈕，就能修改前端的值，同時後端的值也會跟著變動，如果有要傳到資料庫就不用在額外處理很方便。

參考：Livewire AlpineJS