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)">
					түзөтүү
				</button>
			</template>
			<template v-else>
				<input v-model="user.name">
				<input v-model="user.surn">
				<button @click="save(user)">
					сактоо
				</button>
			</template>
		</li>
	</ul>
</template>

Методдорду ишке ашыралы:

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

Мурунку сабактын тапшырмасын ар бир кызматкерди түзөтүү үчүн шилтемелер бар колонка пайда болгондой кылып модификациялаңыз.