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

 

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。

社團 社群