Fomu ya Kuhariri Vitu vya Orodha katika Vue

Sasa hebu tutekeleze uhariri wa vitu vya orodha ya vitu. Tutafanya kitufe, ambacho kwa kubofya juu yake kwenye kipengee cha orodha kitatokea fomu ya kuhariri. Baada ya kujaza fomu tutabofya kitufe cha kuhifadhi na mabadiliko yata hifadhiwa kwenye orodha, na fomu itaondolewa.

Tuanze utekelezaji. Kwenye orodha ya vitu kila kitu tunapaswa kuongeza sehemu moja zaidi, inayobeba hali ya mtumiaji, onyesho au uhariri:

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

Tutaonyesha yaliyomo kwenye orodha kwa mfumo wa orodha:

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

Sasa tutatenganisha hali ya kuonyesha na hali ya kuhariri:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			<template v-if="!user.isEdit">
				{{ user.name }}
				{{ user.surn }}
				<button @click="edit(user)">
					hariri
				</button>
			</template>
			<template v-else>
				<input v-model="user.name">
				<input v-model="user.surn">
				<button @click="save(user)">
					ok
				</button>
			</template>
		</li>
	</ul>
</template>

Tutatekeleza mbinu:

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

Rekebisha kazi ya somo lilopita ili kujenga safu wima yenye viungo vya kuhariri kila mfanyikazi.