Vue的組件沒有工作，甚至我註冊它遵循官方手冊

只是一個很到的Vue 2.0新的，我實際使用如果Laravel 5.4，現在你可以從下面的鏈接看到，我創建了一個組件，它的名字是「畫布圖「，實際上我想要顯示的是一個可過濾的表，然後從下一步獲取更多的Json數據，但現在它總是向我顯示」未知的自定義元素： - 您是否正確註冊了組件？對於遞歸組件，請務必提供「名稱」選項。「，無法理解我遵循官方文檔使用它爲什麼不起作用？Vue的組件沒有工作，甚至我註冊它遵循官方手冊


          
   
    
     
 

 
    new Vue({ 
 
     el:'#filterTest', 
 
     data:{ 
 
     keywords:[{"id":"9","name":"missy","phone":"21324234532"}, 
 
     {"id":"3","name":"Mahama","phone":"345604542"}, 
 
     {"id":"2","name":"Bernard","phone":"241242542"}] 
 
     }, 
 

 
    computed: { 
 
    filterM: function() { 
 
    var self = this 
 
    return self.filter(function (word) { 
 
     return user.name.indexOf(self.searchQuery) !== -1 
 
    }) 
 
    } 
 
} 
 
    
 
    }); 
 

 
    Vue.component('canvas-chat',{ 
 
     template:'#canvasChart', 
 
     props:['keywordsData'] 
 
    }) 
    <script type="text/x-template" id="canvasChart"> 
 
    \t <table> 
 
    \t \t \t  <thead> 
 
    \t \t \t  <tr> 
 
    \t \t \t   <th v-for="key.id in keywordsData"> 
 
    \t \t \t   <span class="arrow" ></span> 
 
    \t \t \t   </th> 
 
    \t \t \t  </tr> 
 
    \t \t \t  </thead> 
 
    \t \t \t  <tbody> 
 
    \t \t \t  <tr v-for="key.name in keywordsData"> 
 
    \t \t \t   <td v-for="key.phone in keywordsData"> {{key.name}}</td> 
 
    \t \t \t  </tr> 
 
    \t \t \t  </tbody> 
 
    \t \t \t </table> 
 
    </script> 
 

 
    <div id="filterTest"> 
 
    <canvas-chat keywordsData="keywords" ></canvas-chat> 
 
    </div>

來源

2017-06-29 robin521

你有幾個問題：

您必須註冊canvas-chat組件您在主要成分使用它之前，首先（放Vue.component('canvas-chat', ...new Vue(...)之前）。
你v-for循環是錯誤的。他們應該像v-for="key in keywordsData"，而不是v-for="key.id in keywordsData"。
的v-for S於該tr和td元素是沒有意義的;您將必須首先處理keywordsData（可能在計算屬性中）以將其轉換爲所需的正確格式，然後循環執行。
必須在keywordsData道具綁定在這樣的模板：:keywords-data="keywords"。

來源

2017-06-29 10:08:13

感謝您的意見。這是作品。 – robin521

Vue的組件沒有工作，甚至我註冊它遵循官方手冊

回答

相關問題