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

Ўтган дарс вазифасини шундай модификация қилингки, ҳар бир ходимни таҳрирлаш учун ҳаволалар бўлган устун пайдо бўлсин.