Install Livewire Laravel
Install livewire dengan composer
composer require livewire/livewireSetelah install livewire dengan composer sertakan JavaScript dan Style pada setiap halaman yang akan menggunakan livewire. Contoh pada saya sertakan pada views/layouts/app.blade.php.
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>Create Component Livewire
Jalankan perintah berikut untuk membuat komponen Livewire baru yang disebut counter.
php artisan make:livewire counterMenjalankan perintah ini akan menghasilkan dua file berikut:
app/Http/Livewire/Counter.php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public function render()
{
return view('livewire.counter');
}
}resources/views/livewire/counter.blade.php
<div>
...
</div>Mari menambahkan beberapa teks ke view sehingga kita dapat melihat sesuatu yang nyata di browser.
Komponen Livewire HARUS memiliki elemen root tunggal.
resources/views/livewire/counter.blade.php
<div>
<h1>Hello World!</h1>
</div>Sertakan komponennya
Pikirkan komponen Livewire seperti Blade yang disertakan. Anda dapat memasukkan @livewire di mana saja dalam tampilan Blade dan itu akan ditampilkan.
<head>
...
@livewireStyles
</head>
<body>
@livewire('counter')
...
@livewireScripts
</body>
</html>Lihat di browser
Muat halaman yang Anda masukkan Livewire di dalam browser. Anda akan melihat "Hello World!".
Tambahkan functionality "counter"
Ganti isi yang dihasilkan dari counter class component dan lihat dengan yang berikut:
app/Http/Livewire/Counter.php
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}resources/views/livewire/counter.blade.php
<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
<button wire:click="decrement">-</button>
</div>Lihat di browser
Sekarang muat ulang halaman di browser, Anda akan melihat counterkomponen yang diberikan. Jika Anda mengklik tombol "+" atau "-", halaman tersebut akan secara otomatis diperbarui tanpa memuat ulang halaman. magic 🧙♂.️
Indrawan10