Vue.js elemento personalizzato sconosciuto

Sono un principiante con Vue.js e sto cercando di creare un'app che soddisfi le mie attività quotidiane e mi sono imbattuto in Vue Components. Quindi di seguito è riportato quello che ho provato ma sfortunatamente mi dà questo errore:

vue.js: 1023 [Vue warn]: Elemento personalizzato sconosciuto: - hai registrato correttamente il componente? Per i componenti ricorsivi, assicurati di fornire l'opzione "nome".

Qualche idea, aiuto, per favore?

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>

Hai dimenticato la componentssezione nel tuo file Vue initialization. Quindi Vue in realtà non conosce il tuo componente.

Modificalo in:

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

 }

});

Ed ecco jsBin, dove tutto sembra funzionare correttamente: http://jsbin.com/lahawepube/edit?html,js,output

AGGIORNARE

A volte vuoi che i tuoi componenti siano visibili a livello globale ad altri componenti.

In questo caso è necessario registrare i componenti in questo modo, prima di Vue initializationo export(nel caso in cui si desideri registrare un componente dall'altro componente)

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

Dopo che puoi aggiungere il tuo componente all'interno del tuo vue el:

<example-component></example-component>

Basta definire Vue.component()prima new vue().

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

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

aggiornare

• HTML converte <anyTag> in<anytag>
• Quindi non utilizzare lettere maiuscole per il nome del componente
• Invece di <myTag>usare<my-tag>

Problema di Github: https://github.com/vuejs/vue/issues/2308

Questo per me lo ha risolto: ho fornito un terzo argomento che è un oggetto.

in app.js(lavorando con laravel e webpack):

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

Non esagerare Vue.component(), registra i componenti a livello globale. Puoi creare un file, chiamarlo MyTask.vue, esportare lì l'oggetto Vue https://vuejs.org/v2/guide/single-file-components.html e quindi importarlo nel tuo file principale e non dimenticare di registrarlo :

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

Assicurati di aver aggiunto il componente ai componenti.

Per esempio:

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

Questo è un buon modo per creare un componente in 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'
});

Stavo seguendo la documentazione di Vue su https://vuejs.org/v2/guide/index.html quando mi sono imbattuto in questo problema.

Successivamente chiariscono la sintassi:

Finora, abbiamo registrato solo componenti a livello globale, utilizzando Vue.component:

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

I componenti registrati a livello globale possono essere utilizzati nel modello di qualsiasi istanza di root Vue (nuova Vue) creata successivamente - e anche all'interno di tutti i> sottocomponenti dell'albero dei componenti dell'istanza di Vue.

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

Quindi, come dice Umesh Kadam sopra, assicurati che la definizione del componente globale venga prima var app = new Vue({})dell'istanziazione.

Ho avuto lo stesso errore

[Vue warn]: elemento personalizzato sconosciuto: - hai registrato correttamente il componente? Per i componenti ricorsivi, assicurati di fornire l'opzione "nome".

tuttavia, mi sono completamente dimenticato di correre npm install && npm run dev compilazione dei file js.

forse questo aiuta i neofiti come me.

OK, questo errore può sembrare ovvio, ma un giorno stavo cercando una risposta SOLO PER SCOPRIRE CHE AVEVO dichiarato 2 volte COMPONENTI . mi stava facendo impazzire perché VueJS non si lamenta affatto quando lo dichiari 2 volte, ovvio che avevo molto codice in mezzo, e quando ho aggiunto un nuovo componente, ho posizionato la dichiarazione in alto, mentre ne avevo anche uno vicino al fondo. Quindi la prossima volta cerca prima questo, risparmia molto tempo