Q&A
実現したいこと
- laravel6に外部ファイルに記述したapp.jsを読み込ませたい
エラーが発生した手順
- 画面上部に固定しているドロップダウンメニューが開けない、開いても閉じれない（開いたまま）で動かせなくなる
対象のソースコード
admin.blade.php
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- CSRF Token --> 9 <meta name="csrf-token" content="{{ csrf_token() }}"> 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 13 14 <!-- Style --> 15 <link href="{{ secure_asset('css/app.css') }}" rel="stylesheet"> 16 <link href="{{ secure_asset('css/custom.css') }}" rel="stylesheet"> 17 18 <title>@yield('title')</title> 19 20 </head> 21 <body> 22 <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 23 <div class="container"> 24 <a class="navbar-brand " href="{{ url('/') }}"><i class="fas fa-dog mr-2"></i>ペットタイム</a> 25 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 26 <span class="navbar-toggler-icon"></span> 27 </button> 28 <div class="collapse navbar-collapse" id="navbarNavDropdown"> 29 <ul class="navbar-nav mr-auto"> 30 31 <li class="nav-item"> 32 <a class="nav-link" href="{{ url('/') }}">トップページ</a> 33 </li> 34 <li class="nav-item"> 35 <a class="nav-link" href="{{ url('/posts') }}">掲示板</a> 36 </li> 37 <li class="nav-item"> 38 <a class="nav-link" href="{{ url('/photos') }}">写真投稿</a> 39 </li> 40 41 </ul> 42 <ul class="navbar-nav"> 43 @guest 44 <li class="nav-item"> 45 <a class="nav-link" href="{{ route('login') }}">ログイン</a> 46 </li> 47 @if (Route::has('register')) 48 <li class="nav-item"> 49 <a class="nav-link" href="{{ route('register') }}">新規登録</a> 50 </li> 51 @endif 52 @else 53 <li class="nav-item dropdown"> 54 <a id="navbarDropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> 55 {{ Auth::user()->name }} <span class="caret"></span> 56 </a> 57 58 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> 59 <a class="dropdown-item" href="{{ route('logout') }}" 60 onclick="event.preventDefault(); 61 document.getElementById('logout-form').submit();"> 62 {{ __('Logout') }} 63 </a> 64 65 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> 66 @csrf 67 </form> 68 </div> 69 </li> 70 @endguest 71 </ul> 72 </div> 73 </div> 74 </nav> 75 76 <main class="py-4"> 77 @yield('content') 78 </main> 79 80 <!-- Optional JavaScript --> 81 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 82 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 83 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 84 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 85 <script src="{{ asset('js/app.js') }}"></script> 86 </body> 87</html>
適用させたいファイル
@extends('layouts.admin') @section('title', '掲示板') @section('content') <div class="container" id="app"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="row"> <h5 class="mt-2 ml-2">投稿一覧</h5> <a href="{{ action('PostController@create') }}" class="btn btn-primary ml-auto mr-2">新規投稿</a> </div> <div class="row mt-3"> <div class="col-md-5"> <form action="{{ route('posts.index') }}" method="get"> <div class="form-group row align-items-right"> <div class="col-auto"> <input type="text" class="form-control" name="user_name" value="{{ $user_name }}" placeholder="ユーザー名"> </div> <div class="col-auto"> @csrf <input type="submit" class="btn btn-primary" value="検索"> </div> </div> </form> </div> </div> @foreach ($posts as $post) <a href="{{ route('posts.show', $post->id) }}"> <div class="card mt-4"> <div class="card-header"> <p class="card-title my-0">{{ $post->title }}</p> </div> <div class="card-body"> <p class="card-text">{{ $post->body }}</p> </div> </a> <div class="card-footer py-1"> <div class="btn-toolbar float-left"> <div class="btn-group mr-2"> <like-component :post="{{ json_encode($post) }}" ></like-component></like-component> </div> </div> <p class="my-auto text-muted text-right">投稿者:{{ $post->user->name }} 投稿日時:{{ $post->created_at }}</p> </div> </div> @endforeach </div> </div> </div> @endsection
app.js
/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */ // const files = require.context('./', true, /.vue$/i) // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) Vue.component('like-component', require('./components/LikeComponent.vue').default); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app', });
エラーに対して自分がやっていたこと
- head内にある<script src="{{ asset('js/app.js') }}" defer></script>を消すとドロップダウンメニューは動きました。
- 読み込ませたいbladeファイルのbody内に記載をするとそのページのみドロップダウンメニューが使用できなくなりました。
JSファイルが干渉しているまでは、特定できましたがそれ以降途方に暮れています。
ご助言、ご教授よろしくお願い致します。
環境
- Laravel 6.18.40
- php 7.2.33
- bootstrap 4.3.1
- Vue.js 2.6.12
回答1件
0
diff
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- CSRF Token --> 9 <meta name="csrf-token" content="{{ csrf_token() }}"> 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 13 14 <!-- Style --> 15 <link href="{{ secure_asset('css/app.css') }}" rel="stylesheet"> 16 <link href="{{ secure_asset('css/custom.css') }}" rel="stylesheet"> 17 18 <!-- Scripts --> 19- <!--<script src="{{ asset('js/app.js') }}" defer></script>--> 20 21 <title>@yield('title')</title> 22 23 </head> 24 <body> 25 <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 26 <div class="container"> 27 <a class="navbar-brand " href="{{ url('/') }}"><i class="fas fa-dog mr-2"></i>ペットタイム</a> 28 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 29 <span class="navbar-toggler-icon"></span> 30 </button> 31 <div class="collapse navbar-collapse" id="navbarNavDropdown"> 32 <ul class="navbar-nav mr-auto"> 33 34 <li class="nav-item"> 35 <a class="nav-link" href="{{ url('/') }}">トップページ</a> 36 </li> 37 <li class="nav-item"> 38 <a class="nav-link" href="{{ url('/posts') }}">掲示板</a> 39 </li> 40 <li class="nav-item"> 41 <a class="nav-link" href="{{ url('/photos') }}">写真投稿</a> 42 </li> 43 44 </ul> 45 <ul class="navbar-nav"> 46 @guest 47 <li class="nav-item"> 48 <a class="nav-link" href="{{ route('login') }}">ログイン</a> 49 </li> 50 @if (Route::has('register')) 51 <li class="nav-item"> 52 <a class="nav-link" href="{{ route('register') }}">新規登録</a> 53 </li> 54 @endif 55 @else 56 <li class="nav-item dropdown"> 57 <a id="navbarDropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> 58 {{ Auth::user()->name }} <span class="caret"></span> 59 </a> 60 61 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> 62 <a class="dropdown-item" href="{{ route('logout') }}" 63 onclick="event.preventDefault(); 64 document.getElementById('logout-form').submit();"> 65 {{ __('Logout') }} 66 </a> 67 68 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> 69 @csrf 70 </form> 71 </div> 72 </li> 73 @endguest 74 </ul> 75 </div> 76 </div> 77 </nav> 78 79 <main class="py-4"> 80 @yield('content') 81 </main> 82 83 <!-- Optional JavaScript --> 84 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 85 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 86 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 87 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 88+ <script src="{{ asset('js/app.js') }}"></script> 89 </body> 90</html>
投稿2020/10/24 13:12
総合スコア3923
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/24 13:15
2020/10/24 13:16
2020/10/24 13:18
2020/10/24 13:19
2020/10/24 13:27
2020/10/24 13:28 編集
2020/10/24 13:31
2020/10/24 13:36 編集
2020/10/24 13:52 編集