Креирање на компоненти во циклус во Vue

Компонентите може да се креираат во циклус, пренесувајќи им ги соодветните податоци. Ајде да погледнеме како се прави ова. Нека во родителската компонента постои следната низа од објекти:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1'
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2'
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3'
			},
		],
	}
}

Ајде да ја итерираме оваа низа од објекти со циклус и во циклусот да креираме компоненти за корисниците:

<template>
	<User v-for="user in users" />
</template>

Да ги наведеме вредностите на атрибутот key за правилно функционирање на циклусот:

<template>
	<User v-for="user in users" :key="user.id" />
</template>

Да ги пренесеме и податоците во компонентите, името и презимето на секој корисник:

<template>
	<User
		v-for="user in users"
		:name="user.name"
		:surn="user.surn"
		:key="user.id"
	/>
</template>

Дадена е следната низа со податоци за вработени:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				salary: 100,
				age: 30,
			},
			{
				id: 2,
				name: 'name2',
				salary: 200,
				age: 40,
			},
			{
				id: 3,
				name: 'name3',
				salary: 300,
				age: 50,
			},
		],
	}
}

Користејќи циклус, креирајте компоненти Employee базирани на оваа низа, пренесувајќи им ги соодветните податоци.