Дар 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 созед, ба онҳо додаҳои мувофиқро гузаронед.