2017-04-27 74 views
0

我想實現我最近的項目VUE JS,因爲我是新來的吧我可能會做一些錯誤,我不能寫catch.I'm跟着我做的步驟我的組件工作。如果你發現任何錯誤。你可以幫我解決這個問題。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' 
}); 

這是我的chat.vue

<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> 

當我加載我認爲,我沒有看到它。意味着空白頁。有什麼可能的錯誤?在此先感謝

+0

你的元素與id應用程序在哪裏?有沒有任何控制檯錯誤?什麼是http響應代碼? –

回答

0

您必須在組件周圍應用DIV:

<div id ="app"> 
    <chat> 

    </chat> 
</div> 

這就是Vue的應用程序將被創建。

米克