javascript - template - vue router

Vue.js elemento personalizado desconocido

Question

Soy un principiante con Vue.js y estoy tratando de crear una aplicación que satisfaga mis tareas diarias y me encontré con Vue Components. Así que a continuación es lo que he intentado, pero desafortunadamente, me da este error:

vue.js: 1023 [Vue warn]: Elemento personalizado desconocido: ¿registró correctamente el componente? Para componentes recursivos, asegúrese de proporcionar la opción "nombre".

Alguna idea, ayuda, por favor?

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

Asegúrese de haber agregado el componente a los componentes.

Por ejemplo:

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

Answer 2

Esta es una buena manera de crear un componente 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''
});

Answer 3

Estaba siguiendo la documentación de Vue en https://vuejs.org/v2/guide/index.html cuando me encontré con este problema.

Más tarde aclaran la sintaxis:

Hasta ahora, solo hemos registrado componentes a nivel mundial, utilizando Vue.component:

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

Los componentes registrados globalmente se pueden usar en la plantilla de cualquier instancia de Vue raíz (nueva Vue) creada posteriormente , e incluso dentro de todos los> subcomponentes del árbol de componentes de esa instancia de Vue.

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

Entonces, como dice Umesh Kadam anteriormente, solo asegúrese de que la definición del componente global venga antes de la instanciación var app = new Vue({}) .

Answer 4

Esto lo resolvió para mí: proporcioné un tercer argumento como objeto.

en app.js (trabajando con laravel y webpack):

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

Answer 5

No Vue.component() exceso Vue.component() , registra componentes a nivel mundial. Puede crear el archivo, asígnele el nombre MyTask.vue, exportar allí el objeto Vue https://vuejs.org/v2/guide/single-file-components.html y luego importarlo en su archivo principal, y no olvide registrarlo. :

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

Answer 6

Olvidó la sección de components en su Vue initialization . Entonces Vue en realidad no sabe acerca de su componente.

Cámbielo a:

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

 }

});

Y aquí está jsBin, donde todo parece funcionar correctamente: http://jsbin.com/lahawepube/edit?html,js,output

ACTUALIZAR

A veces, desea que sus componentes sean visibles globalmente para otros componentes.

En este caso, debe registrar sus componentes de esta manera, antes de la Vue initialization o export Vue initialization (en el caso de que desee registrar un componente del otro componente)

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

Después de que pueda agregar su componente dentro de su vue el :

<example-component></example-component>

Answer 7

Simplemente defina Vue.component() antes de new vue() .

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

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

actualizar

• HTML convierte <anyTag> a <anytag>
• Así que no use letras mayúsculas para el nombre del componente
• En lugar de <myTag> use <my-tag>

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