Vueコンポーネントは動作しません。公式マニュアル

Question

Vue 2.0の新機能です。実際にはLaravel 5.4の場合は、下のリンクから見ると「canvas-chart実際に私が見せたいのはフィルタリング可能なテーブルで、次のステップからもっと多くのJsonデータを得ることができますが、今ではいつも "不明なカスタム要素 - 正しくコンポーネントを登録しましたか？"再帰コンポーネントの場合は、 "名前"オプション。 "私は公式の文書に従っているので、それが使えない理由を理解することができませんか？

          
  
 
   
 
    
 
 

 
    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>
 
   
 
  
 
 

 

Answer 1

あなたはいくつかの問題があります。

1. あなたが主成分（new Vue(...)前Vue.component('canvas-chat', ...を置く）でそれを使用する前に、まずcanvas-chatコンポーネントを登録する必要があります。
2. v-forループが間違っています。それらは、v-for="key.id in keywordsData"ではなく、v-for="key in keywordsData"のようにする必要があります。
3. v-forのtrとtdの要素は意味をなさない。 keywordsDataを最初に（計算されたプロパティで）処理して、正しい形式にしてから、それをループする必要があります。
4. テンプレートのkeywordsData小道具を:keywords-data="keywords"のようにバインドする必要があります。