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">დამატება</button>
</template>

რეალიზაცია გავუკეთოთ შესაბამის მეთოდს:

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

მოცემულია ღილაკი. მოცემულია მასივი. გამოიტანეთ ელემენტები ამ მასივის სიის ul სახით. გახადეთ ისე, რომ ღილაკზე დაჭერისას ამ სიის ბოლოს დაემატოს ახალი პუნქტი.

მოცემულია ღილაკი. მოცემულია მასივი. გამოიტანეთ ელემენტები ამ მასივის სიის ul სახით. გახადეთ ისე, რომ ყოველ ჯერზე, ღილაკზე დაჭერისას სიის პირველი პუნქტი წაიშალოს.

მოცემულია ღილაკი. მოცემულია მასივი. გამოიტანეთ ელემენტები ამ მასივის სიის ul სახით. გახადეთ ისე, რომ ყოველ ჯერზე, ღილაკზე დაჭერისას სიის ბოლო პუნქტი წაიშალოს.

მოცემულია ღილაკი. მოცემულია მასივი. გამოიტანეთ ელემენტები ამ მასივის სიის ul სახით. გახადეთ ისე, რომ ყოველ ჯერზე, ღილაკზე დაჭერისას სიის ბოლოდან მეორე პუნქტი წაიშალოს.

მოცემულია ღილაკი. მოცემულია მასივი. გამოიტანეთ ელემენტები ამ მასივის სიის ul სახით. გახადეთ ისე, რომ ღილაკზე დაჭერისას სიის პუნქტები დალაგდეს.

მოცემულია ღილაკი. მოცემულია მასივი. გამოიტანეთ ელემენტები ამ მასივის სიის ul სახით. გახადეთ ისე, რომ ღილაკზე დაჭერისას სიის პუნქტები უკუღმა დალაგდეს.

გამონაკლისები

JavaScript-ის შეზღუდვების გამო, Vue-ს არ შეუძლია შენიშნოს მასივში შემდეგი ცვლილებები: ელემენტის პირდაპირ მინიჭება ინდექსით: items[გასაღები] = ახალი_მნიშვნელობა და მასივის სიგრძის ცვლილება, მაგალითად: items.length = ახალი_სიგრძე.