Vue组件不起作用，即使我注册它遵循官方手册

Question

只是Vue 2.0的一个新手，我实际上使用的是如果Laravel 5.4，现在你可以从下面的链接看到我创建了一个名为＆＃34; canvas-chart＆＃34;的组件，我想要显示的是什么是一个可过滤的表，然后从后续步骤中获取更多的Json数据，但现在它总是显示我＆＃34;未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请务必提供＆＃34; name＆＃34; 。选择＆＃34; ，无法理解我按照官方文档使用它为什么它不起作用？

    

    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">
    	<table>
    			    <thead>
    			      <tr>
    			        <th v-for="key.id in keywordsData">
    			          <span class="arrow" ></span>  
    			        </th>
    			      </tr>
    			    </thead>
    			    <tbody>
    			       <tr v-for="key.name in keywordsData">
    			        <td v-for="key.phone in keywordsData"> {{key.name}}</td>
    			      </tr> 
    			    </tbody>
    			  </table> 
    </script>

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

Answer 1

你有几个问题：

1. 您必须首先注册canvas-chat组件，然后才能在主要组件中使用它（在Vue.component('canvas-chat', ...之前放置new Vue(...)）。
2. 您的v-for循环错误。它们应该像v-for="key in keywordsData"，而不是v-for="key.id in keywordsData"。
3. v-for和tr元素上的td不合理;您必须首先处理keywordsData（可能在计算属性中）以使其成为您想要的正确格式，然后循环遍历它。
4. 您必须在模板中绑定keywordsData道具，如下所示：:keywords-data="keywords"。