Properties

Initializing 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; 
    }
 
    // ...
}

• mount() 메서드에 initial value 할당 가능

Bulk assignment

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
use App\Models\Post;
 
class UpdatePost extends Component
{
    public $post;
 
    public $title;
 
    public $description;
 
    public function mount(Post $post)
    {
        $this->post = $post;
 
        $this->fill( 
            $post->only('title', 'description'), 
        ); 
    }
 
    // ...
}

• fill() 메서드를 통해 initial values를 한 번에 할당 가능 (같은 키값 매칭)

Data binding

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class TodoList 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">Add Todo</button>
 
    <ul>
        @foreach ($todos as $todo)
            <li>{{ $todo }}</li>
        @endforeach
    </ul>
</div>

• data binding을 통해서 데이터 싱크를 쉽게 맞출 수 있음

Resetting properties

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class ManageTodos extends Component
{
    public $todos = [];
 
    public $todo = '';
 
    public function addTodo()
    {
        $this->todos[] = $this->todo;
 
        $this->reset('todo'); 
    }
 
    // ...
}

• reset() 메서드를 통해 변수를 최초 할당 상태로 되돌릴 수 있음

Supported property types

Primitive types

class TodoList extends Component
{
    public $todos = []; // Array
 
    public $todo = ''; // String
 
    public $maxTodos = 10; // Integer
 
    public $showTodos = false; // Boolean
 
    public $todoFilter; // Null
}

Common PHP types

Type	Full Class Name
Collection	Illuminate\Support\Collection
Eloquent Collection	Illuminate\Database\Eloquent\Collection
Model	Illuminate\Database\Model
DateTime	DateTime
Carbon	Carbon\Carbon
Stringable	Illuminate\Support\Stringable

public function mount()
{
    $this->todos = collect([]); // Collection
 
    $this->todos = Todos::all(); // Eloquent Collection
 
    $this->todo = Todos::first(); // Model
 
    $this->date = new DateTime('now'); // DateTime
 
    $this->date = new Carbon('now'); // Carbon
 
    $this->todo = str(''); // Stringable
}

• 원시 타입과 php에서 지원하는 class들 대부분 사용 가능

❓Supporting custom types

use Livewire\Wireable;
 
class Customer implements Wireable
{
    protected $name;
    protected $age;
 
    public function __construct($name, $age)
    {
        $this->name = $name;
        $this->age = $age;
    }
 
    public function toLivewire()
    {
        return [
            'name' => $this->name,
            'age' => $this->age,
        ];
    }
 
    public static function fromLivewire($data)
    {
        $name = $data['name'];
        $age = $data['age'];
 
        return new static($name, $age);
    }
}

• 직접 만든 클래스는 livewire에서 지원하지 않기 때문에 Wireable 인터페이스를 사용해 이를 해결해야 한다

Accessing properties

<div>
    <input type="text" wire:model="todo">
 
    Todo character length: <h2 x-text="$wire.todo.length"></h2>
</div>

--------------------------------------------------------------------------

<div>
    <input type="text" wire:model="todo">
 
    Todo character length: <h2 x-text="$wire.get('todo').length"></h2>
</div>

• PHP의 여러 메서드를 통해 livewire 객체에 접근 가능하다

Manipulating properties

<div>
    <input type="text" wire:model="todo">
 
    <button x-on:click="$wire.todo = ''">Clear</button>
</div>

• livewire의 객체에 접근 가능하기에 프로퍼티 조작 또한 가능하다

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