前回[Laravel11+LIVEWIRE #2]コンポーネント（Components）でコンポーネントの使い方を学んだ。
今回は公式のプロパティー（Properties）をやっていく。
参考）https://livewire.laravel.com/docs/properties
公式を読んでいてもそれほどだったから省略しようかと思ったけど、ソースの整理といくつか知っておいたほうが良さそうなものもあったのでそれは書いておこうか思う。
プロパティーとは
プロパティは、Livewire コンポーネント内のデータを保存および管理します。これらはコンポーネント クラスのパブリック プロパティとして定義され、サーバー側とクライアント側の両方でアクセスして変更できます。
今までのソースで気に入らないところを修正する
CreatePostって名前なのに一覧表示と登録が入っていたり、名前の付け方もちょっと…なので、名前も付け直していく。
RESTfulな命名でやっていく。
- 一覧表示：index
- 登録画面：create
- 登録処理：store
- 編集画面：edit
- 更新処理：update
- 削除処理：delete（or destory）
一覧表示・登録のコンポーネントを作成する
機能別にフォルダを作ったほうがよいので、フォルダを切る。
% php artisan make:livewire Post\\Index ← 一覧コンポーネント
% php artisan make:livewire Post\\Create ← 登録コンポーネント
% php artisan make:livewire Post\\Item ← 一覧の行コンポーネントapp/Livewire/Post/Create.php
<?php
namespace App\Livewire\Post;
use App\Models\Post;
use Livewire\Component;
class Create extends Component
{
public $title = 'Post title...';
public $message;
public function store()
{
$post = new Post();
$post->user_id = 1;
$post->title = $this->title;
$post->message = $this->message;
$post->save();
return redirect()->to('/posts')
->with('status', 'Post created!');
}
public function render()
{
return view('livewire.post.create');
}
}resources/views/livewire/post/create.blade.php
<div>
<form wire:submit="store">
<label for="title">Title:</label>
<input type="text" id="title" wire:model="title">
<textarea id="message" wire:model="message"></textarea>
<button type="submit">Save</button>
</form>
{{ session('status') }}
</div>app/Livewire/Post/Item.php
<?php
namespace App\Livewire\Post;
use Livewire\Component;
class Item extends Component
{
public $post;
public function render()
{
return view('livewire.post.item');
}
}resources/views/livewire/post/item.blade.php
<div wire:key="{{ $post->id }}">{{ $post->title }} {{ $post->message }}</div>app/Livewire/Post/Index.php
<?php
namespace App\Livewire\Post;
use App\Models\Post;
use Livewire\Component;
class Index extends Component
{
public $posts;
public function render()
{
$this->posts = Post::all();
return view('livewire.post.index');
}
}resources/views/livewire/post/index.blade.php
<div>
@foreach ($posts as $post)
<livewire:post.item :$post :key="$post->id">
@livewire(Post\Item::class, ['post' => $post], key($post->id))
{{--<div wire:key="{{ $post->id }}">{{ $post->title }}</div>--}}
@endforeach
@livewire(Post\Create::class)
</div>routes/web.php
//use App\Livewire\CreatePost;
use App\Livewire\Post;
//Route::get('/posts', CreatePost::class);
Route::get('/posts', Post\Index::class);これで少しきれいになりました。コーディングの話であって画面表示の話ではない。
mountメソッド
コンポーネントの mount() メソッド内でプロパティの初期値を設定できる。
app/Livewire/Post/Index.php
：
public function mount()
{
$this->posts = Post::all();
}
public function render()
{
//$this->posts = Post::all();
：一覧画面を更新したが特に問題なく動作する。
プロパティーのロック
プロパティをクライアント側で変更されるのを防ぐためにロックすることができます。
テスト的にタイトルを変更
app/Livewire/Post/Create.php
class Create extends Component
{
#[Locked]
public $title = 'Post title...';やってみたけど、いままでのソースではロックされているかというと別段何も変わらない。 更新画面でIDをロックしたいのだろう。まぁ今のところはそんなことができるのね程度に留めておく。
感想
公式にはいろいろとプロパティの使い方があるが、省略して今回はソースの整理が主なところになってしまった。
次回はアクションをやる。
コメント