Élément personnalisé inconnu Vue.js

Je suis un débutant avec Vue.js et j'essaie de créer une application qui répond à mes tâches quotidiennes et je suis tombé sur Vue Components. Voici donc ce que j'ai essayé mais malheureusement, cela me donne cette erreur:

vue.js: 1023 [Vue warn]: Elément personnalisé inconnu: - avez-vous enregistré correctement le composant? Pour les composants récursifs, assurez-vous de fournir l'option "nom".

Des idées, de l'aide, s'il vous plaît?

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>

Vous avez oublié la componentssection de votre Vue initialization. Donc Vue ne connaît pas réellement votre composant.

Changez-le en:

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() {

 }

});

Et voici jsBin, où tout semble fonctionner correctement: http://jsbin.com/lahawepube/edit?html,js,output

MISE À JOUR

Parfois, vous souhaitez que vos composants soient globalement visibles par les autres composants.

Dans ce cas, vous devez enregistrer vos composants de cette manière, avant votre Vue initializationou export(dans le cas où vous souhaitez enregistrer un composant de l'autre composant)

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

Une fois que vous pouvez ajouter votre composant dans votre vue el:

<example-component></example-component>

Définissez juste Vue.component()avant new vue().

Vue.component('my-task',{
     .......
});

new Vue({
    .......
});

mise à jour

• HTML se convertit <anyTag> en<anytag>
• N'utilisez donc pas de lettres majuscules pour le nom du composant
• Au lieu d' <myTag>utiliser<my-tag>

Problème Github: https://github.com/vuejs/vue/issues/2308

Cela m'a résolu: j'ai fourni un troisième argument étant un objet.

dans app.js(travail avec laravel et webpack):

Vue.component('news-item', require('./components/NewsItem.vue'), {
    name: 'news-item'
});

N'abusez pas Vue.component(), il enregistre les composants dans le monde entier. Vous pouvez créer un fichier, le nommer MyTask.vue, y exporter l'objet Vue https://vuejs.org/v2/guide/single-file-components.html puis l'importer dans votre fichier principal, et n'oubliez pas de l'enregistrer :

new Vue({
...
components: { myTask }
...
})

Assurez-vous que vous avez ajouté le composant aux composants.

Par exemple:

export default {
data() {
    return {}
},
components: {
    'lead-status-modal': LeadStatusModal,
},
}

C'est un bon moyen de créer un composant en vue.

let template = `<ul>
  <li>Your data here</li>
</ul>`;

Vue.component('my-task', {
  template: template,
  data() {

  },
  props: {
    task: {
      type: String
    }
  },
  methods: {

  },
  computed: {

  },
  ready() {

  }
});

new Vue({
 el : '#app'
});

Je suivais la documentation Vue à https://vuejs.org/v2/guide/index.html lorsque j'ai rencontré ce problème.

Plus tard, ils clarifient la syntaxe:

Jusqu'à présent, nous n'avons enregistré que des composants globalement, en utilisant Vue.component:

   Vue.component('my-component-name', {
       // ... options ...
   })

Les composants enregistrés globalement peuvent être utilisés dans le modèle de toute instance racine de Vue (nouvelle Vue) créée par la suite - et même à l'intérieur de tous les> sous-composants de l'arborescence des composants de cette instance de Vue.

( https://vuejs.org/v2/guide/components.html#Organizing-Components )

Ainsi, comme Umesh Kadam le dit ci-dessus, assurez-vous simplement que la définition globale du composant précède l' var app = new Vue({})instanciation.

J'ai eu la même erreur

[Vue warn]: Elément personnalisé inconnu: - avez-vous enregistré correctement le composant? Pour les composants récursifs, assurez-vous de fournir l'option "nom".

cependant, j'ai totalement oublié de courir npm install && npm run devpour compiler les fichiers js.

peut-être que cela aide les débutants comme moi.

OK, cette erreur peut sembler évidente, mais un jour je cherchais une réponse JUSTE POUR SAVOIR QUE J'AI AVOIR déclaré 2 fois COMPOSANTS . cela me rendait dingue car VueJS ne se plaint pas du tout quand vous le déclarez 2 fois, évidemment j'avais beaucoup de code entre les deux, et quand j'ai ajouté un nouveau composant, j'ai placé la déclaration en haut, alors que j'en avais aussi une près du fond. Alors la prochaine fois que tu cherches ça en premier, ça fait gagner beaucoup de temps