Объектілер массивін өңдеу үшін форма 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;
	},
}

Алдыңғы сабақтағы тапсырманы әрбір жұмысшыны өңдеуге арналған сілтемелері бар баған пайда болатындай етіп өзгертіңіз.