Penciptaan Komponen dalam Gelung di Vue

Komponen boleh dicipta dalam gelung, dengan menghantar data yang sepadan kepada mereka. Mari kita lihat bagaimana ia dilakukan. Katakan dalam komponen induk terdapat tatasusunan objek berikut:

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

Mari kita ulangi tatasusunan objek ini dengan gelung dan dalam gelung kita akan mencipta komponen dengan pengguna:

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

Tentukan nilai atribut key untuk operasi gelung yang betul:

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

Juga hantar data mereka kepada komponen, nama dan nama keluarga setiap pengguna:

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

Diberi tatasusunan berikut dengan data pekerja:

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

Dengan menggunakan gelung, cipta berdasarkan tatasusunan ini komponen Employee, dengan menghantar data yang sepadan kepada mereka.