Creación de componentes en bucle en Vue

Los componentes se pueden crear en un bucle, pasándoles los datos correspondientes. Veamos cómo se hace esto. Supongamos que en el componente padre existe el siguiente array de objetos:

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

Recorramos este array de objetos con un bucle y en el bucle crearemos componentes con los usuarios:

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

Especificamos los valores del atributo key para el correcto funcionamiento del bucle:

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

También pasemos a los componentes sus datos, el nombre y apellido de cada usuario:

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

Se da el siguiente array con datos de empleados:

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

Usando un bucle, crea basándote en este array componentes Employee, pasándoles los datos correspondientes.