แบบฟอร์มสำหรับเพิ่มองค์ประกอบในอาร์เรย์ใน Vue

เรามาเพิ่มข้อความจากอินพุตไปยังท้ายอาร์เรย์อย่าง reactive กัน เริ่มต้นการดำเนินการ สมมติว่าเรามีอาร์เรย์ที่กำหนด:

data() {
	return {
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

เพิ่มคุณสมบัติ newItem เพื่อรองรับการทำงานของอินพุต:

data() {
	return {
		newItem: '',
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

แสดงเนื้อหาของอาร์เรย์ ในรูปแบบรายการ:

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

ตอนนี้มาสร้างอินพุตและปุ่ม เมื่อกดปุ่ม ข้อความจากอินพุตจะถูกเพิ่ม ไปยังท้ายรายการเป็นรายการใหม่:

<template>
	<input v-model="newItem">
	<button @click="addItem">add</button>
</template>

เมื่อกดปุ่มจะเรียกใช้เมธอด addItem ซึ่งจะนำข้อความจาก อินพุตและเพิ่มเป็นองค์ประกอบใหม่ ลงในอาร์เรย์ ส่งผลให้รายการ เปลี่ยนแปลงอย่าง reactive:

methods: {
	addItem: function() {
		this.items.push(this.newItem);
	}
}

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

แก้ไขโจทย์ก่อนหน้าเพื่อให้ รายการใหม่ถูกเพิ่มไปที่ส่วนเริ่มต้นของรายการ