2017-03-19 16 views
0

私はLaravel 5.4で作業していますが、Vueコンポーネントは表示/更新されません。 は、私は新しいプロジェクトを開始し、これがapp.jsVueコンポーネントが表示/更新されない

require('./bootstrap'); 
Vue.component('example', require('./components/Example.vue')); 
Vue.component('chat', require('./components/Chat.vue')); 

const app = new Vue({ 
el: '#app' 
}); 

例である

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css/app.css"> 
</head> 
<body> 
<div id="app"> 
<example></example> 
<chat></chat> 
</div> 

<script type="text/javascript"> 
window.Laravel = { csrfToken: '{{ csrf_token() }}' }; 
</script> 
<script src="js/app.js"></script> 
</body> 
</html> 

これはchat.blade.phpあるweb.phpでチャット/ルートを作成し、コンポーネントをチャットいくつかの基本的なテンプレートですが、私はデータを渡すのではなく、平易なテキストだけです。

Chat.vue

<template lang="html"> 
<div id="content"> 
    <h1>Messages</h1> 
    <p>Message text</p> 
    <small>Hiii</small> 
</div> 
</template> 

<script> 
export default { 
} 
</script> 

私が初めてPHPの職人を実行すると、すべてが動作します。 Chat.vue内のテキストを編集しようとしました.Hiiiに変更したように、私はページをリロードしても変更されません。同じままです。私は、私は考えることができる何か、再び、PHPの職人を実行して、PCを再起動しようとしました。 私はchat.blade.phpに直接いくつかのVueコードを入れてみました。 app.jsとコンポーネントの変更を検出していないようです。 参考までに、私はExample.vueコンポーネントも削除しました。まだページに表示されています。

+0

私はLaravelが何をしているのか、どのようにコンパイルするのか分かりませんが、PHPの職人がJavascriptを処理しないと思います。 編集ファイルの後に 'npm run dev'を実行しようとしましたか? –

+0

'npm run watch 'を使って、ファイルを変更時に再コンパイルして、それ以降のすべての要求の初期オーバーヘッドを節約することもできます。 –

+0

これは今、うまく動作します! –

答えて

2

最良の方法は、結果として、あなたが持っているだろう、それはすべてのパッケージを更新し、不足しているパッケージをインストールしますので、NPMを更新することですあなたの資産をコンパイルするlaravel mix;今すぐあなたはそうすることができません。

npm update 

何人かの人々のために簡単に解決策は

npm run watch-poll 
-2

コピーapp.blade.phpでこのコード:この問題を解決するための

const app = new Vue({ 
el: '#app' 
}); 
+0

これはどのように、なぜそれがうまくいくのかを説明していないので、解決策に関する情報を追加してください。 – avn

0

時計-POLコマンドを実行することである働くことができますが、ブラウザのキャッシュをクリアしようとしたことがありますか?これは問題を解決するはずです。

関連する問題