Die Skepping van Komponente in 'n Luss in Vue

Komponente kan in 'n luss geskep word deur die toepaslike data aan hulle oor te dra. Kom ons kyk hoe dit gedoen word. Laat die volgende skikking van voorwerpe in die ouerkomponent wees:

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

Kom ons deurloop hierdie skikking van voorwerpe met 'n lus en in die lus sal ons komponente met gebruikers skep:

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

Laat ons die waardes van die key-kenmerk spesifiseer vir die korrekte werking van die lus:

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

Laat ons ook die data na die komponente oordra, die naam en van van elke gebruiker:

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

Die volgende skikking met werknemersdata word gegee:

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

Skep komponente Employee gebaseer op hierdie skikking met behulp van 'n lus, en dra die toepaslike data aan hulle oor.