[Livewire] 使用 action 做前後端互動

在 Livewire 內我們可以透過 action 就能實現透過 livewire 做到更新內容的方法，首先我們建立 livewire 的 component：

php artisan make:livewire action

並在 controller 內建立這樣的內容：

class Action extends Component
{
    public $welcome="";
    public function sayHello(){
        $this->welcome="hello";
    }
}

在 action.blade 那個 component 就能透過以下的方法修改內容：

<button wire:click="sayHello">say</button>
<div>
  {{$welcome}}
</div>

這是透過按下 enter 鍵後執行動作的方法：

<input wire:keydown.enter="sayHello" type="text">

如果要帶參數進去的話：

public function sayHello($name=""){
  $this->welcome="hello, ".$name;
}

<button wire:click="sayHello('Tom')">say</button>

滑鼠事件可以加修飾子，可以加的有以下的內容：

鍵盤事件則可以參考 key values 設定要觸發的按鍵為哪個，注意像 ArrowRight 這類的按鍵要寫成 arrow-right，例如：

<input wire:keydown.page-down="foo">