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>