Taulukko-objektien muokkauslomake Vue:ssa

Nyt toteutetaan taulukon elementtien muokkaaminen. Teemme tätä varten painikkeen, jota napsauttamalla listan kohdassa ilmestyy lomake muokkausta varten. Kun lomake on täytetty, painamme tallennuspainiketta ja muutokset tallennetaan taulukkoon, ja lomake poistuu.

Aloitetaan toteutus. Taulukon objekteille jokaiselle objektille meidän on lisättävä vielä yksi kenttä, joka sisältää käyttäjän tilan, näyttö tai muokkaus:

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

Esitetään taulukon sisältö listana:

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

Nyt erotellaan näyttötila ja muokkaustila:

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

Toteutetaan metodit:

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

Muokkaa edellisen oppitunnin tehtävää siten, että siihen ilmestyy sarake linkeillä jokaisen työntekijän muokkaamiseksi.