Vue Jsブレードに表示されない

Question

私は新しいプロジェクトにvue jsを実装しようとしていました。私はそれを初めて知っています。私はキャッチできなかった何かのエラーを起こすかもしれません。私は、私のコンポーネントの仕事。エラーが見つかった場合は、これを整理する手助けをします。

これは私の刃図である：

<div class="panel-body"> 
        <chat inline-template> 

         You are logged in! 

         <hr> 

         <h2>Write something to all users</h2> 
         <input type="text" class="form-control" placeholder="something" required="required" v-model="newMsg" @keyup.enter="press">    

         <hr> 
         <h3>Messages</h3> 

         <ul v-for="post in posts"> 
         <b>@{{ post.username }} says:</b> @{{ post.message }}</li>  
         </ul> 
        </chat> 
       </div> 

app.js

require('./bootstrap'); 

window.Vue = require('vue'); 
Vue.component('example', require('./components/Example.vue')); 
Vue.component('chat', require('./components/chat.vue')); 

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

私は私のビューをロードするとき、これは

<script> 
module.exports = { 

    data() { 
     return { 
      posts: [], 
      newMsg: '', 

     } 
    }, 


    ready() { 
     Echo.channel('public-test-channel') 
      .listen('ChatMessageWasReceived', (data) => { 

       // Push ata to posts list. 
       this.posts.push({ 
        message: data.chatMessage.message, 
        username: data.user.name 
       }); 
      }); 
    }, 

    methods: { 

     press() { 

      // Send message to backend. 
      this.$http.post('/message/', {message: this.newMsg}) 
       .then((response) => { 

        // Clear input field. 
        this.newMsg = ''; 
       }); 
     } 
    } 
}; 
</script> 

私chat.vueあり、私はそれについて何も見なかった。空白のページを意味します。どのような可能性がありますエラー？事前

Answer 1

のおかげであなたがコンポーネントの周囲アプリのdiv要素を持っている必要があります：

<div id ="app"> 
    <chat> 

    </chat> 
</div> 

Vueのアプリケーションが作成される場所です。

ミック