ปฏิกิริยาของอาร์เรย์ใน Vue

ปฏิกิริยาจะทำงานแม้เมื่อมีการเปลี่ยนแปลง อาร์เรย์ที่แสดงผลผ่าน v-for มาลองทำตัวอย่างเพื่อให้ เมื่อกดปุ่ม จะมีการเพิ่มองค์ประกอบใหม่ลงในอาร์เรย์อย่างมีปฏิกิริยา และการเปลี่ยนแปลง จะเกิดขึ้นบนหน้าจอทันที

ลองนำสิ่งที่อธิบายไปใช้งาน สมมติว่าเรามีอาร์เรย์:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

มาแสดงผลองค์ประกอบของ อาร์เรย์นี้ในลูป:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
</template>

สร้างปุ่ม ที่เมื่อกด จะเพิ่มองค์ประกอบใหม่ลงในอาร์เรย์:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">add</button>
</template>

มาใช้งานเมธอดที่เกี่ยวข้อง:

methods: {
	add: function() {
		this.arr.push('xxx');
	}
}

มีปุ่ม ให้ อาร์เรย์ แสดงผลองค์ประกอบ ของอาร์เรย์นี้ในรูปแบบรายการ ul ทำให้ เมื่อกดปุ่ม จะมีรายการใหม่ เพิ่มที่ท้ายรายการนี้

มีปุ่ม ให้ อาร์เรย์ แสดงผลองค์ประกอบ ของอาร์เรย์นี้ในรูปแบบรายการ ul ทำให้ ทุกครั้งที่กดปุ่ม รายการแรกของรายการถูกลบออก

มีปุ่ม ให้ อาร์เรย์ แสดงผลองค์ประกอบ ของอาร์เรย์นี้ในรูปแบบรายการ ul ทำให้ ทุกครั้งที่กดปุ่ม รายการสุดท้ายของรายการถูกลบออก

มีปุ่ม ให้ อาร์เรย์ แสดงผลองค์ประกอบ ของอาร์เรย์นี้ในรูปแบบรายการ ul ทำให้ ทุกครั้งที่กดปุ่ม รายการรองสุดท้ายของรายการถูกลบออก

มีปุ่ม ให้ อาร์เรย์ แสดงผลองค์ประกอบ ของอาร์เรย์นี้ในรูปแบบรายการ ul ทำให้ เมื่อกดปุ่ม รายการในรายการเรียงลำดับ

มีปุ่ม ให้ อาร์เรย์ แสดงผลองค์ประกอบ ของอาร์เรย์นี้ในรูปแบบรายการ ul ทำให้ เมื่อกดปุ่ม รายการในรายการเรียงลำดับ ในลำดับย้อนกลับ

ข้อยกเว้น

เนื่องจากข้อจำกัดของ JavaScript, Vue ไม่สามารถ ตรวจจับการเปลี่ยนแปลงต่อไปนี้ในอาร์เรย์ได้: การกำหนดค่า องค์ประกอบโดยตรงผ่านดัชนี: items[คีย์] = ค่าใหม่ และการเปลี่ยนความยาว ของอาร์เรย์โดยชัดเจน เช่น: items.length = ความยาวใหม่