在 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>

 

滑鼠事件可以加修飾子,可以加的有以下的內容:

Modifier Description
stop Equivalent of event.stopPropagation()
prevent Equivalent of event.preventDefault()
self 只有當在這個元素點擊時才會觸發
debounce.150ms 設定 debounce 的時間

 

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

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