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リストとして出力してください。ボタンをクリックするたびに、リストの最後から2番目の項目が削除されるようにしてください。

ボタンが与えられています。配列が与えられています。この配列の要素をulリストとして出力してください。ボタンをクリックすると、リストの項目がソートされるようにしてください。

ボタンが与えられています。配列が与えられています。この配列の要素をulリストとして出力してください。ボタンをクリックすると、リストの項目が逆順に並び替えられるようにしてください。

例外

JavaScriptの制限のため、Vueは配列に対する以下の変更を検知できません：インデックスを指定した要素の直接代入items[キー] = 新しい値、および明示的な配列の長さの変更、例：items.length = 新しい長さ。