Erstellung von Komponenten in einer Schleife in Vue

Komponenten können in einer Schleife erstellt werden, indem man ihnen die entsprechenden Daten übergibt. Schauen wir uns an, wie das gemacht wird. Nehmen wir an, in der übergeordneten Komponente gibt es das folgende Array von Objekten:

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

Lassen Sie uns dieses Array von Objekten mit einer Schleife durchlaufen und in der Schleife Komponenten mit den Benutzern erstellen:

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

Geben Sie die Werte des Attributs key an, damit die Schleife korrekt funktioniert:

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

Übergeben wir auch die Daten an die Komponenten, den Vor- und Nachnamen jedes Benutzers:

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

Gegeben ist das folgende Array mit Mitarbeiterdaten:

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

Erstellen Sie mit Hilfe einer Schleife basierend auf diesem Array Komponenten Employee, und übergeben Sie ihnen die entsprechenden Daten.