Kuunda Vipengele kwa Mzunguko katika Vue

Vipengele vinaweza kuundwa kwa kutumia mzunguko, ukiwapeleka data zinazofaa. Hebu tuone jinsi hii inafanyika. Hebu tukubali kuwa katika kipengele kizazi kipo safu ifuatayo ya vitu:

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

Wacha tuzungushe safu hii ya vitu kwa kutumia mzunguko na kwenye mzunguko tuunde vipengele vilivyo na watumiaji:

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

Hebu tueleze thamani za kitambulisho key kwa ajili ya kufanya kazi kwa mzunguko iwe sahihi:

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

Hebu tupeleke pia katika vipengele data zao, jina na kile kitambulisho cha kila mtumiaji:

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

Imetolewa safu ifuatayo iliyo na data za wafanyikazi:

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,
			},
		],
	}
}

Kwa kutumia mzunguko, unda kwa kutumia safu hii vipengele Employee, ukiwapeleka data zinazofaa.