Forma masyvo objektų redagavimui Vue

Dabar įgyvendinkime masyvo objektų elementų redagavimą. Norėdami tai padaryti, sukurkime mygtuką, kurį paspaudus sąrašo elemente atsiras redagavimo forma. Užpildę formą mes paspausime išsaugojimo mygtuką ir pakeitimai bus išsaugoti masyve, o forma bus paslėpta.

Pradėkime įgyvendinimą. Masyvo objektų kiekvienam objektui mes turime pridėti dar vieną lauką, kuriame būtų nurodyta naudotojo būsena, rodymas ar redagavimas:

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

Atvaizduokime masyvo turinį sąrašo pavidalu:

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

Dabar atskirkime rodymo režimą ir redagavimo režimą:

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

Įgyvendinkime metodus:

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

Modifikuokite ankstesnės pamokos užduotį taip, kad atsirastų stulpelis su nuorodomis kiekvienam darbuotojui redaguoti.