Tanggal :13 Juni 2024
Menampilkan data dengan Livewire Component

Belajar Laravel Livewire : Menampilkan Data Dengan Component

Artikel ini bagian ke 4 dari total 8 artikel di seri Belajar Laravel Livewire

Assalamualaikum Warohmatulloh Wabarokatuh, melanjutkan artikel menampilkan data, sekarang kita akan memisahkan tampilan menjadi komponen yang lebih kecil lagi agar lebih mudah digunakan ulang atau reusable. Pertama mari kita ubah resources/views/livewire/student-index.blade.php menjadi seperti ini untuk menampilkan data menggunakan component student-single.

<div>
   @foreach ($students as $student)
       <livewire:student-single/>
   @endforeach
</div>

Berikutnya kita ubah resources/views/livewire/student-single.blade.php menjadi seperti ini ketika menampilkan data dengan blade biasanya.

<div class="media mb-3">
    <div class="media-body">
        <h5 class="mt-0">{{ $student->name }}</h5>
    </div>
</div>

Kemudian kita coba akses lagi http://localhost:8000/students dan lihatlah apa yang terjadi, BOOMMM!!!

Menampilkan data dengan Livewire Component
Error karena variabel tidak terdefinisikan.

ERROR!! haha, dikira segampang itu, kita harus mengirimkan variabel ke component student-single dulu untuk menampilkannya. Untuk mengirimkan data ke component Livewire bisa menggunakan tag :variabel="$data" dan :key="$key", jadi kita akan ubah component student-index jadi seperti ini.

<div>
   @foreach ($students as $student)
       <livewire:student-single :student="$student" :key="$student->id"/>
   @endforeach
</div>

Untuk Laravel di bawah versi 7, gunakan syntax ini.

@livewire('student-single', ['student' => $student, 'key' => $student->key])

Setelah itu kita coba refresh halamannya, kita masih menemui error, tapi kali ini error yang berbeda.

Menampilkan data dengan Livewire Component
Error array tidak bisa di unpack.

Nah untuk menggunakan variabel ke dalam component student-single kita gunakan method mount() pada file app/Http/Livewire/StudentSingle.php dan kita gunakan property dengan visibilty public dan mengeset nilainya lewat method mount().

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class StudentSingle extends Component
{
    public $student;

    public function mount($student)
    {
        $this->student = $student;
    }

    public function render()
    {
        return view('livewire.student-single');
    }
}

Kita bisa mengirimkan beberapa variabel, tinggal ulangi dan sesuaikan prosesnya, oke, setelah disimpan, coba akses kembali halamannya, dan akhirnya datanya tampil :p.

Menampilkan data dengan Livewire Component
Tampilan data dengan component Livewire.

Masih belum nemu istimewanya ya? malah ribet ya mau nampilin data gitu doang ribet amat, nah di artikel “Menambahkan Data Tanpa Reload Halaman” ini kawan kawan bisa menemukan kerennya Livewire.

Wassalamualaikum Warohmatulloh Wabarokatuh.

Series Navigation<< Belajar Laravel Livewire : Menampilkan DataBelajar Laravel Livewire : Menambahkan Data Tanpa Reload Halaman >>

Hai semua, saya Amirul seorang Software Engineer, suka membuat konten pembelajaran berupa artikel, video tutorial maupun podcast

10 Comments

      1. Riyan permadi

        Saya baru ngerti ternyata component dalam component karena saya masih yg laravel v ,5.8 biasanya @(student singgle,$student) lalu d panggil dalam mount, lanjutkan mas ,

  1. Syaifur Rijal

    mantap mas, sy mau bertanya, berdasarkan dokumentasi livewire method render hanya boleh dipakai satu kali untuk menampilkan satu view pada sebuah component misalnya view index.blade.php.

    Pertanyaan saya bagaimana caranya membuat satu component tersebut bisa menampilkan lebih dari satu view ya ? misalnya view add.blade.php / edit.blade.php. Karena pada laravel tradisional hal tersebut bisa dilakukan dengan menggunakan helper view() pada method create() atau edit().

Tinggalkan Balasan