Componenets Vue another example

by Megi93

HTML

<div id="app">
	<p> {{ title }} </p>
	<hr>
	<app-user></app-user>
	<app-user></app-user>
	<!-- <div class="user" v-for="user in users">
		<p>Username: {{ user.username }}</p>
	</div> -->
	
</div>

CSS

.user {
	border: 1px solid grey;
	background-color: white;
	padding: 10px;
}

JavaScript

Vue.component('app-user', {
	data: function() {
		return {
			users: [
				{username: 'Max'},
				{username: 'Chris'},
				{username: 'Anna'}
			]
		}
	},
	//must have one root element so we have to wraped it with another <div></div>
	template: '<div><div class="user" v-for="user in users"><p>Username: {{ user.username }}</p></div></div>'
})

new Vue ({
	el: '#app',
	data: {
		title: 'Hello World!',
		//username: 'Max'
		//users: [
			//{username: 'Max'},
			//{username: 'Chris'},
			//{username: 'Anna'}
		//]
	}
	//mozemo koristiti i localno ali je bolje globalno, i to
	//components: {
		//'app-user': {
		//	sve ono u zagradama//
		//}
	//}
});