Memahami Properties di Livewire 4

Dalam Livewire, properties adalah jantung dari pengelolaan state. Semua data yang disimpan, diubah, dan ditampilkan oleh komponen Livewire pada dasarnya hidup di dalam properties ini.

Secara teknis, properties didefinisikan sebagai public property pada class komponen. Menariknya, property ini bisa diakses dan dimodifikasi baik dari server (PHP) maupun client (browser), tanpa kita harus menulis JavaScript yang rumit.

Inisialisasi Properties

Biasanya, nilai awal sebuah property ditentukan di dalam method mount().

Contoh sederhana:

new class extends Component {
    public $todos = [];
    public $todo = '';

    public function mount()
    {
        $this->todos = [
            'Belanja kebutuhan',
            'Jalan pagi',
            'Menulis kode'
        ];
    }
};

Pada contoh ini, $todos awalnya kosong, lalu diisi saat komponen pertama kali dimuat. Jadi ketika halaman dirender, daftar todo tersebut langsung tampil ke pengguna.

Prinsipnya sederhana: mount() dipanggil sekali saat komponen dibuat.

Bulk Assignment dengan fill()

Ketika jumlah property mulai banyak, mengisi satu per satu di mount() bisa terasa melelahkan dan bertele-tele. Untuk itu, Livewire menyediakan method fill().

Contoh kasus edit data:

new class extends Component {
    public $post;
    public $title;
    public $description;

    public function mount(Post $post)
    {
        $this->post = $post;

        $this->fill(
            $post->only('title', 'description')
        );
    }
};

Karena $post->only() menghasilkan array asosiatif, Livewire otomatis mencocokkan key dengan nama property. Hasilnya, kode menjadi lebih ringkas, bersih, dan mudah dibaca.

Data Binding dengan wire:model

Salah satu kekuatan utama Livewire adalah two-way data binding melalui atribut wire:model.

Contoh sederhana:

<input type="text" wire:model="todo">

Artinya, nilai input tersebut akan selalu sinkron dengan property $todo.

Contoh lengkapnya:

new class extends Component {
    public $todos = [];
    public $todo = '';

    public function add()
    {
        $this->todos[] = $this->todo;
        $this->todo = '';
    }
};
<div>
    <input type="text" wire:model="todo" placeholder="Todo...">
    <button wire:click="add">Tambah</button>

    <ul>
        @foreach ($todos as $todo)
            <li>{{ $todo }}</li>
        @endforeach
    </ul>
</div>

Ketika tombol diklik, nilai $todo diambil dari input, dimasukkan ke array, lalu input dikosongkan kembali.

Mereset Property dengan reset()

Untuk menghindari pengulangan kode, Livewire menyediakan method reset().

public function addTodo()
{
    $this->todos[] = $this->todo;
    $this->reset('todo');
}

Method ini akan mengembalikan property ke nilai awal sebelum mount() dipanggil.

Catatan penting:Jika nilai awal property diubah di mount(), maka reset() tidak akan mengembalikannya ke nilai tersebut. Dalam kasus ini, reset manual masih diperlukan.

Mengambil Sekaligus Mereset dengan pull()

pull() adalah versi ringkas dari “ambil lalu reset”.

public function addTodo()
{
    $this->todos[] = $this->pull('todo');
}

Selain satu property, pull() juga bisa digunakan untuk banyak property sekaligus:

$this->pull(); // seperti all() + reset()
$this->pull(['title', 'content']);

Tipe Data Property yang Didukung

Karena Livewire bekerja dengan mekanisme serialize (dehydrate) dan deserialize (hydrate) antara PHP dan JavaScript, tidak semua tipe data bisa digunakan.

Tipe Primitif

Livewire mendukung tipe-tipe dasar berikut:

• Array
• String
• Integer
• Float
• Boolean
• Null

public array $todos = [];
public string $todo = '';
public int $maxTodos = 10;
public bool $showTodos = false;
public ?string $filter = null;

Tipe PHP Umum

Selain tipe primitif, Livewire juga mendukung beberapa object yang umum digunakan di Laravel:

• Collection
• Eloquent Collection
• Model
• Carbon / DateTime
• Stringable
• BackedEnum

Namun perlu diingat, object-object ini akan diubah menjadi JSON lalu dikembalikan lagi ke PHP pada setiap request. Closure dan runtime state tidak akan ikut terbawa.

Catatan Penting untuk Eloquent

Ada dua hal krusial saat menyimpan Eloquent ke dalam property:

1. Constraint query tidak disimpan Misalnya select() akan hilang di request berikutnya.
2. Performa Menyimpan koleksi besar akan menyebabkan query dijalankan ulang terus-menerus.

Solusi terbaik: gunakan Computed Properties.

Computed Properties sebagai Solusi

Computed properties dievaluasi saat dibutuhkan, bukan disimpan sebagai state.

new class extends Component {
    #[Computed]
    public function todos()
    {
        return Auth::user()
            ->todos()
            ->select(['title', 'content'])
            ->get();
    }
};

Di Blade:

@foreach ($this->todos as $todo)
    <li>{{ $todo }}</li>
@endforeach

Keunggulan computed property:

• Query tetap konsisten
• Lebih aman
• Lebih efisien karena memoized (dipanggil sekali per request)

Custom Property dengan Wireables

Jika ingin menyimpan object buatan sendiri, Livewire menyediakan Wireable.

Dengan mengimplementasikan interface Wireable, kita memberi tahu Livewire cara mengubah object ke JSON dan sebaliknya.

Hasilnya, object custom bisa diperlakukan layaknya property biasa.

Akses Property dari JavaScript (Alpine)

Livewire menggunakan Alpine di sisi frontend. Semua property bisa diakses melalui objek $wire.

<h2 x-text="$wire.todo.length"></h2>

Tanpa request ke server, perubahan langsung terlihat di browser.

Manipulasi Property dari Client

<button x-on:click="$wire.todo = ''">Clear</button>

Atau versi eksplisit:

$wire.set('todo', '')

Jika ingin tanpa request ke server:

$wire.set('todo', '', false)

Keamanan: Jangan Percaya Property

Anggap semua public property sebagai input user.

Risiko terbesar biasanya datang dari property seperti id.

Solusi yang disarankan:

1. Authorization
2. Locking property

#[Locked]
public $id;

Untuk Eloquent Model, Livewire otomatis mengunci ID sehingga relatif aman.

Property Mengekspos Informasi Sistem

Karena Livewire melakukan serialization, nama class bisa ikut terkirim ke browser.

Solusinya: gunakan morphMap() agar nama class tidak terekspos secara langsung.

Penutup

Properties di Livewire 4 sangat kuat, tetapi juga menuntut pemahaman yang matang. Jika digunakan dengan benar, kita bisa membangun aplikasi yang interaktif, aman, dan performanya tinggi, tanpa menulis JavaScript kompleks.