Componenten maken in een lus in Vue

Componenten kunnen in een lus worden gemaakt, door hen de bijbehorende gegevens door te geven. Laten we eens kijken hoe dat wordt gedaan. Stel dat in de bovenliggende component de volgende array met objecten staat:

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

Laten we deze array met objecten doorlopen met een lus en in de lus componenten met gebruikers aanmaken:

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

Geef waarden op voor het attribuut key voor een correcte werking van de lus:

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

Laten we ook de gegevens doorgeven aan de componenten, de voornaam en achternaam van elke gebruiker:

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

De volgende array met werknemersgegevens is gegeven:

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

Maak met behulp van een lus op basis van deze array Employee componenten, en geef hen de bijbehorende gegevens door.