Virus Corona (Covid-19)

Dapatkan Informasi terbaru

Contoh Install Livewire, Create Component dan Include Component

Andri03 27 Jun 2020 1,030

Install Livewire Laravel

Install livewire dengan composer

composer require livewire/livewire

Setelah 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 counter

Menjalankan 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 🧙‍♂.️

Tags

livewire component laravel

Related Stories


Latest Stories


Close Ads X