web-dev-qa-db-fra.com

Vue.js élément personnalisé inconnu

Je suis un débutant avec Vue.js et j'essaie de créer une application adaptée à mes tâches quotidiennes. J'ai rencontré Vue Components. Voici ci-dessous ce que j'ai essayé mais malheureusement, cela me donne cette erreur:

vue.js: 1023 [Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, veillez à 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>
javascriptvue.js
70
Juliver Galleto

Vous avez oublié la section components de votre Vue initialization. Donc, Vue ne connaît pas 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

UPDATE

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

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

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

Après que vous puissiez ajouter votre composant dans votre vue el:

<example-component></example-component>
101
GONG

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>, utilisez <my-tag>

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

43
umesh kadam

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

new Vue({
...
components: { myTask }
...
})
2
Arthur Kuznetsov

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

Cela a résolu le problème pour moi: j'ai fourni un troisième argument qui est un objet.

dans app.js (en utilisant laravel et webpack):

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

Assurez-vous d'avoir ajouté le composant aux composants.

Par exemple:

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

Je suivais la documentation Vue à l'adresse 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 ...
   })

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

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

Donc, comme le dit Umesh Kadam ci-dessus, assurez-vous que la définition du composant global est antérieure à l'instanciation var app = new Vue({}).

0
Nathaniel Rink