Vue js elemento personalizado desconocido
Soy un principiante con Vue JS y estoy tratando de crear una aplicación que atiende mis tareas diarias y me encontré con componentes de Vue. Así que a continuación es lo que he intentado, pero por desgracia me da este error:
SDV.js: 1023 [Vue warn]: Unknown custom element: - did you registrar el componente correctamente? Para componentes recursivos, asegúrese de para 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>6 answers
Olvidaste la sección components en tu Vue initialization. Así que Vue en realidad no sabe acerca de su componente.
Cámbialo 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
ACTUALIZACIÓN
A veces desea que sus componentes sean visibles globalmente para otros componentes.
En este caso necesita registrar sus componentes de esta manera, antes de su Vue initialization o export (en caso si desea registrar un componente desde el 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-21 05:28:10
Simplemente define Vue.component() antes de new vue().
Vue.component('my-task',{
.......
});
new Vue({
.......
});
Update
- HTML convierte
<anyTag>a<anytag> - Así que no use letras captital para el nombre del componente
- En lugar de
<myTag>use<my-tag>
Problema de Github: https://github.com/vuejs/vue/issues/2308
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-27 15:46:53
Estaba siguiendo la documentación del sdv 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.componente:
Vue.component('my-component-name', { // ... options ... })Los componentes registrados globalmente se pueden usar en la plantilla de cualquier raíz Instancia de Vue (nueva Vue) creada después - e incluso dentro de todos > subcomponentes del componente de esa instancia de Vue arbol.
(https://vuejs.org/v2/guide/components.html#Organizing-Components )
Así que como umesh kadam dice anteriormente, solo asegúrese de que la definición de componente global viene antes de la instanciación var app = new Vue({}).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-08 21:28:11
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'
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-30 21:45:10
Asegúrese de haber añadido el componente a los componentes.
Por ejemplo:
export default {
data() {
return {}
},
components: {
'lead-status-modal': LeadStatusModal,
},
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-10 23:44:39
Esto lo resolvió para mí: Proporcioné un tercer argumento siendo un objeto.
En app.js (trabajando con laravel y webpack):
Vue.component('news-item', require('./components/NewsItem.vue'), {
name: 'news-item'
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-29 13:13:21