Vue的组件没有工作，甚至我注册它遵循官方手册

Question

只是一个很到的Vue 2.0新的，我实际使用如果Laravel 5.4，现在你可以从下面的链接看到，我创建了一个组件，它的名字是“画布图“，实际上我想要显示的是一个可过滤的表，然后从下一步获取更多的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. 您必须注册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 S于该tr和td元素是没有意义的;您将必须首先处理keywordsData（可能在计算属性中）以将其转换为所需的正确格式，然后循环执行。
4. 必须在keywordsData道具绑定在这样的模板：:keywords-data="keywords"。