iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 7

Day 07 | 互動事件

互動事件顧名思義,就是前後端之間的互動啦!現在要從頁面上觸發後端的 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:click
按鍵 wire:keydown
送出 wire:submit

或是一些頁面元件有支援的事件,例如 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 也提供了一些方法,好讓你更輕鬆的去操作。

Function 功能
$refresh 重新渲染頁面,注意:並不是將頁面重置的意思
$set('property', value) 可以直接改這個變數的值
$toggle('property') 同上,但是是改 Boolean 的值
$emit('event', ...params) 觸發全域事件,後面章節會介紹
$event 能保存事件的特殊變數,像是wire:change="setSomeProperty($event.target.value)",跟 Vue 在觸發事件時拿到的類似,會拿到 DOM 發生的事件,詳見 MDN 文件 - Event

這裡就使用最常用到的 $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 的值

上一篇
Day 06 | 資料綁定(二) - 計算屬性 Computed
下一篇
Day 08 | 觸發事件
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言