Code Demon Code Demon - 3 months ago 155
Javascript Question

Vue js unknown custom element

I'm a beginner on Vue JS and I'm trying to create an app that cater my daily tasks and I run unto a Vue Components so below is what I've tried but unfortunately it gives me this error


vue.js:1023 [Vue warn]: Unknown custom element: - did you
register the component correctly? For recursive components, make sure
to provide the "name" option.


Any ideas, help please?



new Vue({
el : '#app',
data : {
tasks : [
{ name : "task 1", completed : false},
{ name : "task 2", completed : false},
{ name : "task 3", completed : true}
]
},
methods : {

},
computed : {

},
ready : function(){

}

});

Vue.component('my-task',{
template : '#task-template',
data : function(){
return this.tasks
},
props : ['task']
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
<div v-for="task in tasks">
<my-task :task="task"></my-task>
</div>

</div>

<template id="task-template">
<h1>My tasks</h1>
<div class="">{{ task.name }}</div>
</template>




Answer

You forgot about components section in your Vue initialization. So Vue actually don't know about your component.

Change it to:

var myTask = Vue.component('my-task',{
  template : '#task-template',
  data : function(){
      return this.tasks
  },
  props : ['task']
});

new Vue({
el : '#app',
data : {
    tasks : [
        { name : "task 1", completed : false},
        { name : "task 2", completed : false},
        { name : "task 3", completed : true}
    ]
},
components: {myTask: myTask},
methods : {

},
computed : {

},
ready : function(){

}

});

And here is jsBin, where all seems to works correctly: http://jsbin.com/lahawepube/edit?html,js,output