Biểu mẫu thêm phần tử vào mảng trong Vue

Hãy cùng thêm văn bản từ input vào cuối mảng một cách reactive. Hãy bắt đầu triển khai. Giả sử chúng ta đã có một mảng:

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

Hãy thêm thuộc tính newItem, hỗ trợ hoạt động của input:

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

Hãy hiển thị nội dung của mảng dưới dạng danh sách:

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

Bây giờ hãy tạo một input và một nút, khi nhấp vào nút, văn bản từ input sẽ được thêm vào cuối danh sách như một mục mới:

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

Khi nhấp vào nút, phương thức addItem sẽ được gọi, phương thức này sẽ lấy văn bản từ input và thêm nó như một phần tử mới vào mảng, điều này sẽ dẫn đến thay đổi reactive của danh sách:

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

Cho một mảng. Cho một input. Cho một nút. Hãy xuất các phần tử của mảng này dưới dạng danh sách ul. Hãy làm sao để khi nhấp vào nút, văn bản từ input được thêm vào cuối danh sách.

Hãy sửa đổi bài toán trước đó sao cho mục mới được thêm vào đầu danh sách.