Livewire 與 AlpineJS- 透過 @entangle 分享狀態

分享:

Livewire 還有一個很方便的 feature 叫做 @entangle,可以讓你簡單的把 livewire 的變數丟給 alpineJS 去操作,這邊我先在 component 那裡設定變數和 function:

public $showDropdown = false;
public $fruit="apple";
public function setFruit($fruit){
  $this->fruit=$fruit;
}

在 alpineJS 這邊,先透過 @entangle 就可以把變數接過來,之後就可以完全透過 alpineJS 操作了。

像下面這邊我就用 @entangle 把 livewire 的 showDropdown 丟給 alpine 的 open,之後修改 open 的內容,livewire 那邊就可以跟著連動。

<div x-data="{ open: @entangle('showDropdown'), fruit: @entangle('fruit') }">
  <button @click="open = true">Show More...</button>
  <ul x-show="open" @click.away="open = false">
    <li><button wire:click="setFruit('apple')">apple</button></li>
    <li><button wire:click="setFruit('orange')">orange</button></li>
  </ul>
  <div x-text="fruit"></div>
</div>

 

 

和我們交流

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

社團 社群