Формаи таҳрири массив аз объектҳо дар 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;
	},
}

Масъалаи дарси гузаштаро тағйир диҳед то ки сутуне бо пайвандҳо барои таҳрири ҳар як коргар пайдо шавад.