Join our newsletter!

Enter your email to receive our latest newsletter.

Don't worry, we don't spam

livewire# php# vue# api

3 bulan yang lalu

Penggunaan wire:init pada livewire 3

Konsep penggunnaan wire:init pada livewire digunakan untuk memanggil fungsi tertentu setelah komponent selesai di load oleh browser. Hal ini sangat berguna jika dalam satu page web anda mempunyai beberapa komponen  atau jika Anda ingin mengeksekusi logic asinkron seperti mengambil data dari API atau melakukan pemanggilan pertama tanpa user interaction.
 
Contoh Implementasi "wire:init". Pada halaman home kita pada bagian bawah halaman terdapat section yang berisi list data artikel. Pertama kita tambahkan komponen Home,

class Home extends Component
{
    use LivewireAlert;
    public  $blogs;
 
    public function render()
    {

        return view('livewire.home', [
            'data' => MSHome::oldest(),
        ])->layout('components.layouts.front');
    }


kemudian pada kompenen tersebut tambahkan fungsi loadBlogs

public function loadBlogs()
    {
        $this->blogs = Blogs::where('type', '!=', 1)->latest()->limit(4)->get(); 
    }


tambahkan file blade untuk komponen Home yang baru saja kita buat tadi, misal: home.blade.php

    <section id="blogs" class="py-20 md:py-[65px] relative" wire:init="loadBlogs()" livewire:revenue lazy>
        <div class="container">
            <div class="flex flex-wrap items-center justify-between mb-8">
                <h2 class="mr-10 text-4xl font-bold leading-none md:text-5xl">
                    Read Our latest articles
                </h2>
                <a href="{{ route('blog.list') }}"
                    class="block pb-1 mt-2 text-base font-black text-primary uppercase border-b border-transparent hover:border-green-600">
                    Show All <i class='bx bx-right-arrow-circle'></i>
                </a>
            </div>


tambahkan sebuah section pada file blade tersebut untuk memanggil fungsi yang sudah kita tambahkan pada komponen Home

Saat dilakukan render komponen Home. maka fungsi loadBlogs akan ter-load


Penjelasan
a. Komponen Livewire:
   - Komponen "loadBlogs" memiliki variabel "$blogs" yang akan diisi oleh fungsi "loadBlogs()".
   - Fungsi "loadBlogs()" dipanggil otomatis ketika komponen selesai diinisialisasi, berkat "wire:init".

b. Blade Template:
   - Template akan menampilkan teks "Loading products..." saat data belum tersedia.
   - Setelah data di-load, produk akan ditampilkan dalam bentuk daftar.

c. Cara Kerja
- Ketika halaman dimuat, direktif "wire:init="loadBlogs"" akan memanggil fungsi "loadBlogs" di komponen Livewire.
- Saat fungsi selesai dieksekusi, Livewire akan merender ulang komponen dengan data produk yang diambil.


Dengan pendekatan ini, Anda bisa menjalankan logic asinkron seperti pemanggilan API atau pemrosesan awal tanpa interaksi dari pengguna.