ობიექტების მასივის რედაქტირების ფორმა Vue-ში

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

მოდი, განვახორციელოთ. ობიექტების მასივში თითოეულ ობიექტს ჩვენ უნდა დავუმატოთ კიდევ ერთი ველი, რომელიც შეიცავს მომხმარებლის მდგომარეობას, ჩვენებას ან რედაქტირებას:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
				isEdit: false,
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
				isEdit: false,
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
				isEdit: false,
			},
		]
	}
}

გამოვიტანოთ მასივის შიგთავსი სიის სახით:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			{{ user.name }}
			{{ user.surn }}
		</li>
	</ul>
</template>

ახლა გავყოთ ჩვენების რეჟიმი და რედაქტირების რეჟიმი:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			<template v-if="!user.isEdit">
				{{ user.name }}
				{{ user.surn }}
				<button @click="edit(user)">
					edit
				</button>
			</template>
			<template v-else>
				<input v-model="user.name">
				<input v-model="user.surn">
				<button @click="save(user)">
					save
				</button>
			</template>
		</li>
	</ul>
</template>

განვახორციელოთ მეთოდები:

methods: {
	edit(user) {
		user.isEdit = true;
	},
	save(user) {
		user.isEdit = false;
	},
}

მოდიფიცირეთ წინა გაკვეთილის ამოცანა ისე, რომ გამოჩნდეს სვეტი ბმულებით თითოეული თანამშრომლის რედაქტირებისთვის.