Tutorial Livewire : Component



Cara membuat component

php artisan make:livewire CreatePost

php artisan make:livewire create-post

Perintah di atas akan menghasilkan file app/Livewire/CreatePost.php

<?php
 
namespace App\Livewire;
use Livewire\Component;
class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

View : resources/views/livewire/create-post.blade.php

<div>
    {{-- ... --}}
</div>

Membuat di dalam direktori

php artisan make:livewire Posts\\CreatePost
php artisan make:livewire posts.create-post

Membuat di dalam inline

php artisan make:livewire CreatePost --inline

Menambahkan properti 

<?php
 
namespace App\Livewire;
use Livewire\Component;
class CreatePost extends Component
{
    public $title = 'Post title...';
    public function render()
    {
        return view('livewire.create-post');
    }
}

Cara mengakses properti di view

<div>
    <h1>Title: "{{ $title }}"</h1>
</div>


Menambahkan data di view

class CreatePost extends Component
{
    public $title;
 
    public function render()
    {
        return view('livewire.create-post')->with([
            'author' => Auth::user()->name,
        ]);
    }
}

Menamhkan  wire:key to @foreach loops
Tanpa wire:keyadanya atribut dalam loop Blade, Livewire tidak akan dapat mencocokkan elemen lama dengan posisi barunya dengan benar saat loop berubah. Hal ini dapat menyebabkan banyak masalah yang sulit didiagnosis dalam aplikasi Anda.

<div>
    @foreach ($posts as $post)
        <div wire:key="{{ $post->id }}"> 
            <!-- ... -->
        </div>
    @endforeach
</div>


Posting Komentar

Lebih baru Lebih lama