互动事件顾名思义，就是前後端之间的互动啦！现在要从页面上触发後端的 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 的值