[解決済み] Vue.jsの不明なカスタム要素

質問

私はVue.jsの初心者です。私は毎日のタスクに対応するアプリを作ろうとしていて、Vue Componentsに遭遇しました。以下は私が試したことですが、残念ながらこのエラーが発生します。

vue.js:1023 [Vue warn]: 不明なカスタム要素： - したか？ コンポーネントを正しく登録しましたか？再帰的なコンポーネントの場合、以下の点を確認してください。 name" を指定してください。

何かアイデア、ヘルプ、お願いします。

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>

解決方法は？

を忘れていませんか？ components セクションの Vue initialization . そのため、Vueは実際にはあなたのコンポーネントについて知らないのです。

に変更します。

var myTask = Vue.component('my-task', {
 template: '#task-template',
 data: function() {
  return this.tasks; //Notice: in components data should return an object. For example "return { someProp: 1 }"
 },
 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() {

 }

});

そして、これがjsBinです。すべてが正しく動作しているように見えます。 http://jsbin.com/lahawepube/edit?html,js,output

アップデイト

コンポーネントは、他のコンポーネントからグローバルに見えるようにしたい場合があります。

この場合、この方法でコンポーネントを登録する必要があります。 Vue initialization または export (他のコンポーネントからコンポーネントを登録する場合)

Vue.component('exampleComponent', require('./components/ExampleComponent.vue')); //component name should be in camel-case

の中にコンポーネントを追加することができます。 vue el :

<example-component></example-component>