Vue js élément personnalisé inconnu

Question

Je suis un débutant avec Vue JS et je suis en train de créer une application qui répond à mes tâches quotidiennes, et j'ai couru dans la Vue des Composants. Donc voici ce que j'ai essayé, mais malheureusement, il me donne cette erreur:

vue.js:1023 [Vue avertir]: Inconnu élément personnalisé: - avez-vous enregistrer le composant correctement? Pour les composants, assurez-vous pour fournir le "nom" de l'option.

Toutes les 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>

Answer 1

Vous avez oublié l' components section Vue initialization. Donc Vue ne fait pas savoir à propos de votre composant.

Modifier:

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 fonctionne correctement: http://jsbin.com/lahawepube/edit?html,js,sortie

Mise à JOUR

Parfois, vous voulez que vos composants à l'échelle mondiale visible pour les autres composants.

Dans ce cas, vous devez enregistrer votre composants de cette façon, avant votre Vue initialization ou export (dans le cas où si vous souhaitez vous enregistrer en composant à partir de l'autre composant)

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

Après vous pouvez ajouter votre composant à l'intérieur de votre vue el:

<example-component></example-component>

Answer 2

Il suffit de définir Vue.component() avant new vue() .

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

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

mettre à jour

• HTML convertit <anyTag> en <anytag>
• Donc, n'utilisez pas de lettres capitales pour le nom du composant
• Au lieu de <myTag> utiliser <my-tag>

Numéro Github: https://github.com/vuejs/vue/issues/2308

Answer 3

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

Par exemple:

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

Answer 4

J'ai suivi le long de la Vue de la documentation à https://vuejs.org/v2/guide/index.html quand je suis tombé sur cette question.

Plus tard, ils permettent de préciser la syntaxe:

Jusqu'à présent, nous avons enregistré seulement des composants à l'échelle mondiale, à l'aide de Vue.composant:

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

Enregistré globalement les composants peuvent être utilisés dans le modèle de toutes les racines de Vue de l'instance (nouvelle Vue) créé par la suite – et même à l'intérieur de tous les >sous-composants de Vue de l'instance de composant de l'arbre.

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

Afin Umesh Kadam dit ci-dessus, assurez-vous que le mondial de la définition de composant vient avant l' var app = new Vue({}) de l'instanciation.

Answer 5

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'
});