Ob'ektlar massivini tahrirlash uchun forma Vue da

Keling, endi ob'ektlar massivi elementlarini tahrirlashni amalga oshiramiz. Buning uchun ro'yxat bandi bosilganda tahrirlash uchun forma paydo bo'ladigan tugma yaratamiz. Formani to'ldirgandan so'ng, biz saqlash tugmasini bosamiz va o'zgarishlar massivda saqlanadi, forma esa olib tashlanadi.

Amalga oshirishni boshlaymiz. Ob'ektlar massivida har bir ob'ektga biz foydalanuvchi holatini ko'rsatadigan yana bir maydon qo'shishimiz kerak, ko'rsatish yoki tahrirlash:

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,
			},
		]
	}
}

Massiv tarkibini ro'yxat ko'rinishida chiqaramiz:

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

Endi ko'rsatish rejimi va tahrirlash rejimini ajratamiz:

<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>

Metodlarni amalga oshiramiz:

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

Oldingi dars vazifasini har bir xodimni tahrirlash uchun havolalar ustuni paydo bo'lishi uchun o'zgartiring.