I just started with Vue.js in school and in my first assignment I´m going to print a h2 from a vue component but I cant get it to work. I have created the vue component as shown below.
var app = new Vue({
el: '#app'
})
Vue.component('titleMsg', {
template: '<h1>{{ title }}</h1>',
data: {
title: 'Vue startsida'
}
})
And my html code here.
<body>
<div id="app">
<titleMsg></titleMsg>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
</body>
Can someone please tell me what i´m missing?
To achieve expected result, use directive name format(kebabCase) for component name and "component’s data option must be a function" as per official documentation
https://v2.vuejs.org/v2/guide/components.html
Instead, a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object:
sample working code for reference-
Vue.component('titleMsg', {
template: '<h1>{{ title }}</h1>',
data:function() {
return {
title: 'Vue startsida'
}
}
})
new Vue({ el: '#app' })
#app div{
border: 1px solid black;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app">
<title-msg></title-msg>
</div>
</body>
codepen - https://codepen.io/nagasai/pen/GRRereG
It's not showing because data should be a function that returns an object...
data() {
return {
title: 'Vue startsida'
}
}
Also, kebab-case the name of the component in the markup..
<div id="app">
<title-msg></title-msg>
</div>
https://codeply.com/p/LwKtkn7VUX
Related
I'm learning Vue with Vuex, I tried to do a component but appear this error:
vue.js:634 [Vue warn]: Unknown custom element: actividadescomponent - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in )
error screen shot
I tried many ways but I could not find a solution.
That's the code html:
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<!-- Vuex -->
<script src="https://unpkg.com/vuex#3.6.0/dist/vuex.js"></script>
</head>
<body>
<div id="caja-vue">
<actividadesComponent></actividadesComponent>
</div>
<script src="codigo.js"></script>
</body>
</html>
That's the JS code:
//componentes
Vue.component('actividadesComponent', {
template: /*html*/
` <div>
<h1>Hola mundo</h1>
</div>
`,
computed: {
...Vuex.mapState(['actividades'])
},
methods: {
...Vuex.mapActions(['llamarJson'])
}
});
//VueEx
const store = new Vuex.Store({
state: {
actividades: [],
programas: []
},
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.actividades = llamarJsonAction;
}
},
actions: {
llamarJson: async function(){
const data = await fetch('/Documentos/Calendario-academico/calendario-2021-prueba.json');
const actividades = await data.json();
commit('llamarJsonMutation', actividades);
}
}
});
//Vue
new Vue({
el: '#caja-vue',
store: store
});
In-DOM templates will convert tag names to lowercase, so you essentially have:
<actividadescomponent></actividadescomponent>
Two options:
Use kebab case in the DOM:
<actividades-component></actividades-component>
This works because Vue will automatically register the component in that form as well when you use capitalization.
Or register the component with an all-lowercase name:
Vue.component('actividadescomponent', ...)
Read Component Registration in the docs for more information.
To simplify the markup of a Vue component, I’m trying to use an object for the props.
When defining the template of the component as described in the code example on Components Basics — Vue.js all works fine. But trying to define the template as an x-template, I’m getting an error saying, that the property 'title' of undefined cannot be read.
Here’s the code:
<div id="app">
<script type="text/x-template" id="post-template">
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
</script>
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
</div>
const data = {
posts: [
{
title: "Hello World",
content: "Bar"
}
]
};
let postComponent = {
props: ['post'],
template: 'post-template'
}
const vue = new Vue({
el: '#app',
components: {
'blog-post': postComponent
},
data() {
return data;
}
});
Is it not possible to access object properties in a x-template or is there something wrong with my code?
Two things:
Take the x-template outside of your app div. Vue is going to replace all the content in the div, so that template will be lost
postComponent should refer to template with a selector, so #post-template instead of post-template
Here's a demo of it working: https://jsfiddle.net/vzj5g2sn/
I'm currently learning JavaScript, HTML, and Vue.Js, and now how to work with components.
I'm taking an online course which corrects code using a bot.
The assignment is to create a component, greet that produces <div>hello!</div>when it's called using <greet></greet>. To complete the assignment I need to use Vue.Component and the templete-key.
I need to set the el-value at new Vue-caller so it matches <div id="app"></div>
This is in my HTML code so far(with script src included):
<body>
<div id="app">
<greet="greet"></greet>
</div>
</body>
This is my my Vue code so far
new Vue({ el: '#app' })
Vue.component('greet', {
data() {
return {
greet
}
},
template: '<div>hello!</div>'
})
The output on the HTML page is just blank, so I don't understand what I'm missing here.
The output from the bot is:
file.js
✓ exists
✓ is valid JavaScript
1) renders the correct markup
When you use the syntax Vue.component() you are registering a component globally, so it can be used by any new Vue instances created afterward. So:
new Vue({ el: '#app' }) // this Vue instance does not contain the greet component because it does not exists yet.
Vue.component('greet', {
data() {
return {
}
},
template: '<div>hello!</div>'
})
Instead:
Vue.component('greet', {
data() {
return {
}
},
template: '<div>hello!</div>'
})
new Vue({ el: '#app' }) // this Vue instance will contain the greet component because it was already created and registered.
Also <greet="greet"></greet> is not valid syntax. It should be <greet></greet>.
You should remove greet from data() function. it has no meaning and use.
The final code should look like:
<body>
<div id="app">
<greet></greet>
</div>
</body>
Vue.component('greet', {
template: '<div>hello!</div>'
})
new Vue({ el: '#app' })
There are couple of mistakes here.
First <greet="greet"></greet> doesn't work. There's something calles props in vue (you'll learn it in future) Change that line to <greet></greet>
Then you don't have to use data() to show hello div. Delete the greet from data.
Above steps might fix your fault
I created a simple Vue example to show the name 'John' using inline template but get the following error instead:
[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
However if I use the minify version:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.min.js"></script>
The code works with the word 'John' print out and no error is shown. Is this some sort of bug or I'm not using Vue properly?
Vue.component('profilecontent', {});
var content = new Vue({
el: '#profile-content-wrapper',
data: {
name: "John",
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.js"></script>
<!-- Minify version works
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.min.js"></script>
-->
<div id="profile-content-wrapper">
<profilecontent inline-template>
<div>
<div>{{name}}</div>
</div>
</profilecontent>
</div>
It's not that using the minified version of Vue fixes the bug, it's that the un-minified version shows warnings when you're doing something that's probably incorrect, and the minified version suppresses these warnings.
The way you're using inline-template means that Vue wants to look for your name variable on the profilecontent component, instead of on the main app. Strictly speaking you should be passing name to that component as a prop; this eliminates the warning even in the unminified development mode:
Vue.component('profilecontent', {props: ['name']});
var content = new Vue({
el: '#profile-content-wrapper',
data: {
name: "John",
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.js"></script>
<div id="profile-content-wrapper">
<profilecontent inline-template :name="name">
<div>
<div>{{name}}</div>
</div>
</profilecontent>
</div>
(That said, I'm honestly not certain why the name variable is managing to fall through to the component when the warnings are suppressed; variable scope inside an inline-template is supposed to be to the component, not its parent.)
You should use <slot></slot> to compose your component i.e: putting other element inside it like :
Vue.component('profilecontent', {
template: `<h1><slot></slot></h1>`
});
var content = new Vue({
el: '#profile-content-wrapper',
data() {
return {
name: "John",
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.js"></script>
<!-- Minify version works
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.min.js"></script>
-->
<div id="profile-content-wrapper">
<profilecontent>
<div>
<div>{{name}}</div>
</div>
</profilecontent>
</div>
if you're working with inline template you could put that name property inside the data object of that component like :
Vue.component('profilecontent', {
data() {
return {
name: "John",
}
}
});
var content = new Vue({
el: '#profile-content-wrapper',
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.js"></script>
<!-- Minify version works
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.min.js"></script>
-->
<div id="profile-content-wrapper">
<profilecontent inline-template>
<div>
<div>{{name}}</div>
</div>
</profilecontent>
</div>
I am unsure am I doing something wrong but the vuejs component I declared is not working.
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>
JavaScript:
var a = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
Vue.component('todo-item',
{
template: '<li>This is a todo</li>'
})
I am using the JsFiddle, message part does display the data but the todo-item didn't show anything.
Your component needs to inside your "#app" div.
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>
</div>
Here is a working fiddle.
Vue.component has to be called before new Vue in order for the Vue instance to use the component. From the docs (which aren't all that clear on this, admittedly):
These components are globally registered. That means they can be used in the template of any root Vue instance (new Vue) created after registration.
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
var a = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
That, and your app's code has to all be inside of the #app div, as pointed out by CUGreen's answer.