การรับคีย์ในการวนซ้ำอาร์เรย์ใน Vue

บางครั้งนอกจากองค์ประกอบของอาร์เรย์แล้ว เรายังต้องการเข้าถึงคีย์ด้วย วิธีนี้ ใช้ไวยากรณ์ที่ขยายออกไปดังนี้:

<template>
	<p v-for="(elem, key) in arr">
		 {{ key }} {{ elem }}
	</p>
</template>

เราสามารถดำเนินการต่างๆ กับคีย์เมื่อแสดงผลได้ ตัวอย่างเช่น ทำให้หมายเลขเริ่มต้นจากหนึ่ง:

<template>
	<p v-for="(elem, key) in arr">
		 {{ key + 1 }} {{ elem }}
	</p>
</template>

กำหนดอาร์เรย์ต่อไปนี้:

data() {
	return {
		arr: ['x', 'y', 'z'],
	}
}

แสดงคีย์ของอาร์เรย์นี้ ในรูปแบบรายการ ul