Obýektler massiwini redaktirlemek üçin forma Vue-da

Indi massiw obýektiniň elementlerini redaktirlemegi amala aşyralyň. Bunun üçin düwmäni ýasalyň, basylanda sanaw pozisýasynda redaktirlemek üçin forma peýda bolar. Formany dolduranyňyzdan soň ýatda saklamak düwmesine basarys we üýtgeşmeler massiwe ýazylar, forma bolsa ýitirer.

Amala aşyrmaga başlaýalyň. Obýektleriň massiwinde her bir obýekte ýene bir meýdan goşmaly, ulanyjynyň ýagdaýyny görkezýän: görkezmek ýa-da redaktirlemek:

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

Massiwiniň mazmunyny sanaw görnüşinde çykaryň:

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

Indi görkeziş režimini we redaktirleme režimini bölüň:

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

Usullary amala aşyryň:

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

Öňki sapagyň meseleşigini üýtgediň şeýlelikde her bir işgäri redaktirlemek üçin baglanyşyklar bilen sütün peýda bolsun.