Laravel投稿サイト構築.61 モーダルダイアログ(livewire)【！！！未解決！！！】
【 注意 】
私のブログでこのページへのアクセスが一番多い。
アクセスがあるのは嬉しいが、このページで試していることは、
Laravelでlivewireを使ってダイアログ表示。
なんだけど、実現していません。
実現したのはBootstrapを使ったやり方です。↓
なので、このページを見てもLivewireを使ったバージョンは確認できませんのであしからず。ちなみに認証にBreezeを使ってるとLivewireとあんまし相性が良くないみたいです。
以下、元の記事内容です。
前回、ドメインURLでの公開まで進んだ。
こちらでのサイト構築関係の記事は投稿はやめて、サイト管理用のブログで更新しようと思っていたのだが、細かい技術系の話はやはりこちらに書いていくことにした。
対応の結果こうなったよっていうのだけ向こうのブログに載せていく予定。
今回の目標
投稿欄をダイアログ表示して、ダイアログに投稿内容を入力するように修正する。
Laravelでダイアログする方法を知らないので調査。
livewireというパッケージを使用する。
javascriptで実行されるようなことをLaravel側で処理するというようなパッケージの認識。
やっていきます。
livewireパッケージのインストール
$composer require livewire/livewire
livewireコンポーネント作成
$php artisan make:livewire themes
以下のファイルが作成される。
resources\views\livewire\themes.blade.php
app\Http\Livewire\Themes.php
ルーティング修正
routes\web.phpを修正。
use App\Http\Livewire\Themes;
Route::get('/themes', [App\Http\Livewire\Themes::class, 'render']);
ダイアログ用のblade.phpファイルを用意
投稿用の子画面の入力項目等を定義する。
コンポーネントクラス更新
Themes.php
コントローラクラスと似ていて、画面表示用の関数がindexでなくrender
create() でモーダルを開く
ローカルにisOpenフラグを持ち、モーダル画面の状態を保持する。
public function create()
{
$this->resetInputFields();
$this->openModal();
}
public function openModal()
{
$this->isOpen = true;
}
public function closeModal()
{
$this->isOpen = false;
}
ダイアログ画面表示
Theme.blade.php
<button wire:click="create()" class="bg-blue-500 hover bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">投稿</button>
@if($isOpen)
@include('livewire.create_post')
@endif
動作テスト
とりあえずここまでで画面表示してみると、
Undefined variable $isOpen
publicの変数がbladeから見えていない様子。
時間切れでここまで。
続く
