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

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

解決済

4回答

532閲覧

Laravel5.5にて、Vue.jsが動かない

shokomint

総合スコア13

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グッド

1クリップ

投稿2018/01/09 15:56

編集2018/01/09 16:47

###前提・実現したいこと
PHP(Laravel5.5)のサンプルコードを試しているのですが、
Vue.jsがうんともすんとも言わず困っています。
「npm run dev」でのコンパイルは成功しています。

以下のソースコードを動かすと、以下のようなエラーメッセージがでます。
さらに、bladeの方の記述を「@{{message}}」に変更してみると、
「{{message}}」という文字列がブラウザに表示され、
「this is ok」と表示されません。

###エラーメッセージ
"Use of undefined constant message - assumed 'message' (View: /Users/shoko/Develop/urbeaut/resources/views/register.blade.php)"

###該当のソースコード
resources/assets/js/app.js
(サンプルに「data:{message:"this is ok")}」を追加)

Javascript

1require('./bootstrap'); 2window.Vue = require('vue'); 3Vue.component('example-component', require('./components/ExampleComponent.vue')); 4 5const app = new Vue({ 6 el: '#app', 7 data: { 8 message:"this is ok" 9}

resources/views/register.blade.php
(新規作成のファイルです。)

HTML

1<div id="app">{{message}}</div>

routes/web.php
(既存ファイルに追加しています。)

PHP

1Route::get('/register', function() { 2 return view('register'); 3});

###参考URL
https://github.com/laravel/laravel
https://github.com/laravel/framework
(サンプルと完全一致するソースが見つからないので、代わりに参考URLを貼っています。)

以上、お時間ありましたら、どなたかよろしくお願いいたします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/01/09 16:01

「PHP(Laravel5.5)のサンプルコードを試している」そのURLとか明示しておくと回答者は助かるでしょうね。
shokomint

2018/01/09 16:11

ご指摘ありがとうございました。追記しました。お時間ありましたら、回答のほう、よろしくお願いします。
退会済みユーザー

退会済みユーザー

2018/01/09 16:13

URL間違ってません?
shokomint

2018/01/09 16:50

度々ご指摘ありがとうございます。完全一致するソースがないようなので、参考URLとしました。これで分かればいいのですが。。
guest

回答4

0

コピペミスかもしれませんが、質問のresources/assets/js/app.jsのコードだと、new Vueがきちんと閉じれてないのでJavaScriptのエラーになっていないか等も、Chromeの開発ツールなどで一度確認してみて下さい。

const app = new Vue({ el: '#app', data: { message:"this is ok" } })

投稿2018/01/10 06:09

aro10

総合スコア4106

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

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

shokomint

2018/01/10 11:01

お忙しい中ご回答ありがとうございます。 コンポーネントのほうはまだマウントできないのですが、おかげさまで、スクリプトの方は以下で動きました。 ・app.jsの"const app"を"var app"へ ・register.blade.php内に、"<script src="js/app.js"></src>を「@{{message}}」の下へ追記 コンポーネントの方はもう少し頑張ってみます。 ご回答ありがとうございました。
guest

0

Laravelは最初からVueコンポーネント使うように準備されてるので見るのはExampleComponent.vue

Vue.component('example-component', require('./components/ExampleComponent.vue'));

blade側ではこれでVueコンポーネントが表示される。

<example-component></example-component>

Laravel+Vue.jsの開発はこのコンポーネントを増やしていく作業。

{{}}がVueとBladeで同じなのでBlade側でVueの{{}}は書かないようにするのが基本。
@{{}}はVueがデフォルト採用される前からある機能なのでVueコンポーネントでは使わない。
https://readouble.com/laravel/5.5/ja/blade.html#blade-and-javascript-frameworks

投稿2018/01/10 01:43

kawax

総合スコア10377

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

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

shokomint

2018/01/10 11:42

お忙しい中、ご回答ありがとうございます。 コンポーネントが無事、マウントされました。 ・Vue.componentの下に、new Vueをしてその中でelに"app2"を指定(dataは書かない)。 ・blade側に「<div id="app2"><example-component></exmaple-component></div>」 Vueの{{}}ではなく、コンポーネントを使うべきとの開発のアドバイス、ありがとうございます。 スクリプトの方も動かないのがなぜなのか気になったので動かしてみましたが、アドバイスに従う方向で考えてみようと思います。 ありがとうございました。
guest

0

resources/assets/js/app.jsを下記のようにしてみてはいかがでしょうか。目的が違う場合は下記サイトが参考になるかもしれません。
https://laracasts.com/discuss/channels/laravel/passing-data-from-laravel-blade-to-vuejs

js

1const app = new Vue({ 2 el: '#app', 3 data: { 4 message:{"ok":"this is ok"} 5 } 6});

resources/views/register.blade.phpは下記のようにします。

php

1<div id="app">@{{message.ok}}</div>

どうしてもテキスト形式がよければ、下記のようにするとうまく表示できるかと思います。

js

1const app = new Vue({ 2 el: '#app', 3 data: { 4 msg:"this is ok" 5 } 6});

resources/views/register.blade.phpは下記のようにします。

php

1<div id="app">@{{msg}}</div>

投稿2018/01/09 18:09

Tomak

総合スコア1652

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

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

shokomint

2018/01/10 11:07

お忙しい中ご回答ありがとうございます。 そんなやり方もあるのですね。 スクリプトは、bladeの方に、<script src="js/app.js"></script>が漏れていたこと、app.jsの「const app」という表現を「var app」としたら動きました。 開発は経験あるのですが、ウェブ開発は初めてで、javascriptすら分かっておらず、こんな初歩的なミスをしてしまいました。 ありがとうございました。
guest

0

ベストアンサー

http://recipes.laravel.jp/recipe/102
中括弧を表示

bladeでの{{}}記述になってしまうので

<div id="app">{{message}}</div>

ではなく

<div id="app">@{{message}}</div>

と、あとは
https://jp.vuejs.org/v2/guide/components.html
data は関数でなければならない
なので関数にしてみればいかがでしょう。

投稿2018/01/09 17:01

編集2018/01/09 17:06
rururu3

総合スコア5545

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

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

shokomint

2018/01/10 11:14

お忙しい中ご回答ありがとうございます。 コンポーネントの方はまだマウントできないのですが、スクリプトは、bladeの方に、<script src="js/app.js"></script>を追記、app.jsの「const app」という表現を「var app」としたら動きました。 いただいたリンク読んでみましたが、きちんと理解できてるか怪しいですが、たぶん、関数でなければならないのは、コンポーネントの中でだけなのかな?と思います。 ほんとjavascriptは難しいです。 ありがとうございました。 javascriptはほんと難しいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問