Vueでの配列要素追加フォーム

入力フィールドからテキストをリアクティブに配列の末尾に追加してみましょう。実装に取り掛かりましょう。配列が与えられているとします：

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">追加</button>
</template>

ボタンがクリックされると、addItemメソッドが呼び出され、入力フィールドからテキストを取得して配列に新しい要素として追加します。これによりリストがリアクティブに更新されます：

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

配列が与えられています。入力フィールドが与えられています。ボタンが与えられています。この配列の要素をulリストとして表示してください。ボタンをクリックすると、入力フィールドのテキストがリストの末尾に追加されるようにしてください。

前のタスクを修正して、新しい項目がリストの先頭に追加されるようにしてください。