質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

1回答

322閲覧

Laravel5.6 Vueのサンプルコードがうまく表示できない

jilrain

総合スコア6

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/05/28 12:38

編集2022/01/12 10:55

前提・実現したいこと

Laravel5.6で、Vueの導入をしたい
view/home.blade.phpに書いたサンプルコード

<example-component></example-component>

の中身を表示したいです

発生している問題・エラーメッセージ

全く表示がされない、{{}}で囲んだ変数は、@をつけても変数の中身が表示されない

※追記

TypeError: undefined is not an object (evaluating 'window.Laravel.csrfToken')

というのが、index.jsにあると書かれていました
app.blade.phpのヘッダー内に、下記のコードは一応入れてあるのですが、これでは足りないのでしょうか?

<!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}">

該当のソースコード

<div id="app"> <example-component></example-component> </div> <script src="/js/app.js"></script>

サンプルコードをそのまま書いても全く何も表示されません。

<div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card card-default"> <div class="card-header">Example Component</div> <div class="card-body"> I'm an example component, @{{name}}. </div> </div> </div> </div> <script> var app = new Vue({ el: '.container', data: { name: 'Vue' } }) </script> <script src="/js/app.js"></script> </div>

BladeにExampleComponentの中身をそのまま記述すると、とりあえず下のように表示はできるようになるのですが、試しに{{}}に変数を表示できるか試すと、それも

I'm an example component, {{name}}.

という感じでうまく表示ができません

試したこと

<script src=" {{ mix('js/app.js') }} "></script>

<script src="{{ asset('js/app.js') }}"></script>

を、app.blade.phpに追加したり、app.jsの参照先が違うのかと思って

<script src="../js/app.js"></script>

といったように変えてみたりしましたが、変化がありません。一応npm run watchやnpm run devで動かしているので、変更が反映されていないことはないと思います。
他にサンプルコードの表示ができないといった記事が少なく、どうすれば良いのかがわかりません。

補足情報(FW/ツールのバージョンなど)

Laravel5.6.23
Dockerを使っています

インストールしたLaravelのpackage.jsonに記述されているバージョン
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hota1024

2018/05/29 00:27

エラーなどは表示されていますか?ブラウザのデベロッパーツールで確認してみてください。
jilrain

2018/05/29 01:00

ご指摘ありがとうございます、ツールで確認したところ、エラーメッセージ欄に追記した通り、TypeError: undefined is not an object (evaluating 'window.Laravel.csrfToken')というのが出ていました
guest

回答1

0

<!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}">

の部分を

<script> window.Laravel = { csrfToken: '{{ csrf_token() }}' } </script>

にすればエラーはなくなると思います。

TypeError: undefined is not an object (evaluating 'window.Laravel.csrfToken')
window.Laravel.csrfTokenという変数が宣言されていないためです。

投稿2018/05/29 01:02

hota1024

総合スコア354

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jilrain

2018/05/29 01:24

ありがとうございます、該当箇所を変えたところ、 [Vue warn]: Cannot find element: #appという警告が出てきて、何も表示がされなくなってしまいました エラーの出ている箇所は、 Warn -index.js Query -index.js $mount -index.js _init -index.js Vue -index.js (anonymous関数) -index.js (以下2箇所ずつ) _webpack_require -app.js グローバルコード -app.js という感じです それと、[Vue warn]: Error compiling template: というのが出ていて、app.blade.php(テンプレートとして使用)のBody部分が全てエラーになっていました インストールに失敗しているということなのでしょうか?
hota1024

2018/05/29 01:36 編集

[Vue warn]: Cannot find element: #appはapp.blade.phpに<div id="app"></div>が記述されているか確認してください。 idがappの要素がないとエラーになってしまいます。
jilrain

2018/05/29 02:04

さきほどapp.bladeの中を確認したのですが、body内に記述されています
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問