| PHP | Laravel |
|---|---|
| 8.0.0 | 8.83.5 |
私は以前LaravelのフロントエンドとしてVueを用いproperty(comuted property)をバインドしたことがあり、今回はlivewireで同様のことがしたく調べてみました。
Laravelのプロジェクトを作りlivewireをインストールしておきます。また見た目を整えるためTailwind CSSを使っています。
welcome.blade.phpを以下のように修正。
welcome.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
{{-- ここがキモ--}}
@livewireStyles
</head>
<body>
{{--以下2行もキモ--}}
@livewire('cal')
@livewireScripts
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
<script>
flatpickr("#strDate", {
"locale": "ja",
}
);
</script>
</body>
</html>
今から作ろうとしているlivewire componentの名前はcalです。私の調べ方が悪いのかどんなに探してもわからなかったのですが、livewire componentで外部JavaScriptを使いたいときはここで読み込むと動くようです。
php artisan make:livewire cal
CLASS: app/Http/Livewire/Cal.php
VIEW: resources/views/livewire/cal.blade.php
と2つのファイルが作られます。それらを以下のように修正。
cal.blade.php
<div>
<div>
<input id="strDate" class="block mt-1 w-full" type="text" name="strDate" wire:model="strDate"/>
</div>
<div class="flex">
@foreach($this->theWeek as $theDay)
{{ $theDay }}
@endforeach
</div>
</div>
</div>
Cal.php
<?php
namespace App\Http\Livewire;
use Carbon\Carbon;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Collection;
use Livewire\Component;
class Cal extends Component
{
//propertyの宣言
public string $strDate;
/**
* @return void
*/
public function mount(): void
{
// propertyの初期化
$this->strDate = Carbon::today()->format('Y-m-d');
}
/** computed propertyを定義
* @return Collection
*/
public function getTheWeekProperty(): Collection
{
/** @var <string> $theWeekArray
*/
$theWeekArray = [];
$currentDate = Carbon::parse($this->strDate);
$theWeekArray[] = $currentDate->format('m月d日');
for ($i = 0; $i < 6; $i++) {
$day = $currentDate->addDays()->format('m月d日');
$theWeekArray[] = $day;
}
return collect($theWeekArray);
}
/**
* @return Factory|View|Application
*/
public function render(): Factory|View|Application
{
return view('livewire.cal');
}
}
computed propertyはgetXxxPropertyで定義、値を返すこと。(xxxはcomputed propertyの名前)
このように動きます。
