互動事件顧名思義，就是前後端之間的互動啦！現在要從頁面上觸發後端的 Function 不用在自己寫 JavaScript 然後用 AJAX 去幫你觸發啦，也不用為了一個功能多寫一隻 Route。透過 Livewire 直接無痛呼叫寫在 Livewire 內的 function，用起來體感滿分！！

範例

今天就使用簡單的計數器來當範例，每當按下按鈕就會讓值加1：

class Day7 extends Component
{
    public $count = 0;

    public function addCount()
    {
      $this->count++;
    }
    ...

<div>
    <h2>{{ $count }}</h2>
    <button wire:click="addCount">+</button>
</div>

非常簡單的就完成了與後端的互動！！

注意：每次互動都會使頁面重新渲染

其他互動事件

或是一些頁面元件有支援的事件，例如 wire:change

範例：

<input wire:keydown.enter="addCount">

<form wire:submit.prevent="save">
    ...
    <button>Save</button>
</form>

傳遞參數

當然要傳遞參數也是能夠輕鬆做的：

public function setCount($value)
{
    $this->count = $value;
}

<button wire:click="setCount(100)">設為100</button>

魔術方法

Livewire 也提供了一些方法，好讓你更輕鬆的去操作。

這裡就使用最常用到的 $set 來做範例，直接將計數器設為 999。

 <button wire:click="$set('count', 999)">999</button>

範例 & 練習

GitHub 網址在這邊

運行之後打開 http://127.0.0.1:8000/day7 就能看到今天的範例啦！

檔案的話分別在：
app\Http\Livewire\Example\Day7.php
resources\views\livewire\example\day7.balde.php

今天出了兩個練習題：

1. 練習：完成減1 以及 將值重置
2. 進階練習: 搭配 Input 讓原本的值加上 Input 的值