Q&A
実現したいこと
Livewireを使ってモーデルを実装する
発生している問題・分からないこと
プログラミング初心者です。問い合わせフォーム作成時にモーデル機能を使いたいのですが、一通り作成してもボタンが反応しません。
エラーメッセージ
error
1エラーは出てません。モーダルを表示させたいのですが「詳細」ボタンを押しても何も反応しません。 2
該当のソースコード
ContactModel.php
1<?php 2 3namespace App\Http\Livewire; 4 5use Livewire\Component; 6 7 8class ContactModal extends Component 9{ 10 public $showModal = false; 11 12 public function render() 13 { 14 return view('livewire.contact-modal'); 15 } 16 17 public function openModal() 18 { 19 $this->showModal = true; 20 } 21 22 public function closeModal() 23 { 24 $this->showModal = false; 25 } 26} 27
app.blade.php
1<!DOCTYPE html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>FashionablyLate</title> 8 <link rel="stylesheet" href="{{ asset('css/sanitize.css') }}"> 9 <link rel="stylesheet" href="{{ asset('css/common.css') }}"> 10 <link rel="preconnect" href="https://fonts.googleapis.com"> 11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 12 <link href="https://fonts.googleapis.com/css2?family=Inika&display=swap" rel="stylesheet"> 13 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> 14</head> 15<!-- Livewire Styles --> 16@livewireStyles 17 18@yield('css') 19</head> 20 21<body class="{{ Route::currentRouteName() }} font-sans text-gray-900 antialiased"> 22 <!-- 共通ヘッダー --> 23 <header class="header"> 24 <div class="header__inner"> 25 <!-- サイトタイトル --> 26 <div class="header__logo"> 27 <a class="header__logo-link" href="/">FashionablyLate</a> 28 </div> 29 30 <!-- ナビボタン --> 31 <div class="header__nav"> 32 <!-- ログインページには登録ボタンを表示する --> 33 @if(Route::currentRouteName() == 'login') 34 <a class="nav__button--register" href="/register">register</a> 35 <!-- 登録ページにはログインボタンを表示する --> 36 @elseif(Route::currentRouteName() == 'register') 37 <a class="nav__button--login" href="/login">login</a> 38 <!-- 管理画面にはログアウトボタンを表示する --> 39 @elseif(Route::currentRouteName() == 'admin') 40 <form action="{{ route('logout') }}" method="POST" style="display:inline;"> 41 @csrf 42 <button type="submit" class="nav__button--logout">logout</button> 43 </form> 44 @endif 45 </div> 46 </div> 47 </header> 48 49 <!-- メインコンテンツ --> 50 <main> 51 @yield('content') 52 </main> 53 54 <!-- Livewire Scripts --> 55 @livewireScripts 56</body> 57 58</html>
admin.blade.php
1@extends('layouts.app') 2 3@section('css') 4<link rel="stylesheet" href="{{ asset('css/admin.css') }}"> 5@endsection 6 7@section('content') 8<div class="admin-contact__content"> 9 <!-- ページタイトル --> 10 <div class="admin-contact__heading"> 11 <h2>Admin</h2> 12 </div> 13 14 <!-- 中略 --> 15 16 <!-- 問い合わせテーブル --> 17 <div class="contact-list"> 18 <table class="contact-list__inner"> 19 <!-- ヘッダー --> 20 <tr class="contact-list__row"> 21 <th class="contact-list__header"> 22 <span class="admin-table__header-span">お名前</span> 23 </th> 24 <th class="contact-list__header"> 25 <span class="admin-table__header-span">性別</span> 26 </th> 27 <th class="contact-list__header"> 28 <span class="admin-table__header-span">メールアドレス</span> 29 </th> 30 <th class="contact-list__header"> 31 <span class="admin-table__header-span">お問い合わせの種類</span> 32 </th> 33 <th class="contact-list__header"> 34 <span class="contact-list__header-span"></span> 35 </th> 36 </tr> 37 38 <!-- 問い合わせ一覧 --> 39 @foreach($contacts as $contact) 40 <tr class="contact-list__row"> 41 <td class="contact-list__data">{{ $contact->last_name }} {{ $contact->first_name }}</td> 42 <td class="contact-list__data">{{ $contact->gender == 1 ? '男性' : ($contact->gender == 2 ? '女性' : 'その他') }}</td> 43 <td class="contact-list__data">{{ $contact->email }}</td> 44 <td class="contact-list__data">{{ $contact->category->content }}</td> 45 <td class="contact-list__data"> 46 <!-- 詳細ボタン --> 47 <button class="contact-detail__button" type="button" wire:click="openModal()">詳細</button> 48 <!-- Livewireモーダルコンポーネント --> 49 @livewire('contact-modal') 50 </td> 51 </tr> 52 @endforeach 53 </table> 54 </div> 55 @livewireScripts 56</div> 57@endsection
contact
1@if($showModal) 2<div class="fixed z-10 inset-0 overflow-y-auto"> 3 <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> 4 <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div> 5 6 <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> 7 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> 8 <h3 class="text-lg leading-6 font-medium text-gray-900"> 9 モーダルタイトル 10 </h3> 11 <div class="mt-2"> 12 <p class="text-sm text-gray-500"> 13 モーダルの内容をここに記述します。 14 </p> 15 </div> 16 </div> 17 <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> 18 <button wire:click="closeModal()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700"> 19 閉じる 20 </button> 21 </div> 22 </div> 23 </div> 24</div> 25@endif
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
コードは何度も調べて間違っていないと思っています…
Log::info("showModal: " . $this->showModal);でエラーを確認しましたが、エラーは出ていませんでした、
恐らくJavaScriptが根本的な原因かと思ってはいるのですが、どこを確認したり操作したりしたらいいのか分かりません。何日もここで止まってしまっているのでどなたかご教示いただけますと幸いです。
補足
別の方法で実装しようとして<script src="{{ mix('js/app.js') }}" defer></script>を挿入したら「The Mix manifest does not exist. (View: /var/www/resources/views/layouts/app.blade.php)」のエラーが出て解消できませんでした。
他の方法でも実装できるのなら教えていただけますと幸いです。
あなたの回答
tips
プレビュー
