4. Properties

tech

Table of Content

• Introduction
• Initialize Properties
• Bulk Assignment
• Data Binding
• Resetting Properties

Introduction

Properti menyimpan dan mengelola data di dalam komponen Livewire Anda. Mereka didefinisikan sebagai properti publik pada kelas komponen dan dapat diakses dan dimodifikasi baik di sisi server maupun klien.

Initialize Properties

<?php
namespace App\Livewire;
 
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
 
class TodoList extends Component{
	public $todos = [];
	public $todo = '';
 
	public function mount()
	{
		$this->todos = Auth::user()->todos;
	}
}
 

Bulk Assignment

Terkadang menginisialisasi banyak properti dalam metode mount() terasa bertele-tele. Untuk membantu hal ini, Livewire menyediakan cara mudah untuk menetapkan beberapa properti sekaligus melalui metode fill().

class UpdatePost extends Component
{
    public $post;
    public $title;
    public $description;
 
    public function mount(Post $post)
    {
        $this->post = $post;
        $this->fill(
            $post->only('title', 'description'),
        );
    }
}
 

Data Binding

Livewire mendukung two-ways data binding melalui atribut HTML wire:model. Hal ini memungkinkan Anda dengan mudah menyinkronkan data antara properti komponen dan input HTML, menjaga antarmuka pengguna dan status komponen tetap sinkron.

Mari kita gunakan direktif wire:model untuk mengikat properti $todo dalam komponen TodoList ke elemen input dasar:

class Todo extends Component
{
    public $todos = [];
    public $todo = '';
 
    public function add()
    {
        $this->todos[] = $this->todo;
 
        $this->todo = '';
    }
 
    public function render()
    {
        return view('livewire.todo');
    }
}
 

Untuk blade nya seperti ini:

<div>
    <input type="text" wire:model="todo" placeholder="Todo...">
 
    <button wire:click="add">Add Todo</button>
 
    <ul>
        @foreach ($todos as $todo)
            <li>{{ $todo }}</li>
        @endforeach
    </ul>
</div>
 

Resetting Properties

Kita perlu mengatur ulang properti Anda kembali ke keadaan awal setelah action dilakukan oleh pengguna. Dalam kasus ini, Livewire menyediakan metode reset() yang menerima satu atau lebih nama properti dan menyetel ulang nilainya ke keadaan awal. Intinya ketika kita coba add todolist, maka otomatis data ditambahkan ke array, dan value input sudah bersih.

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

Note : reset() tidak akan berfungsi di mount(). Jika ingin menggunakan di mount() silahkan reset manual!

Date : 21-02-2024