Modulo per la modifica di un array di oggetti in Vue

Ora implementiamo la modifica degli elementi dell'array di oggetti. Creiamo un pulsante che, quando cliccato, farà apparire un modulo di modifica nell'elemento della lista. Dopo aver compilato il modulo, cliccheremo sul pulsante di salvataggio e le modifiche saranno salvate nell'array, e il modulo scomparirà.

Iniziamo l'implementazione. Per ogni oggetto nell'array dobbiamo aggiungere un ulteriore campo, che contenga lo stato dell'utente, visualizzazione o modifica:

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

Visualizziamo il contenuto dell'array sotto forma di lista:

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

Ora separiamo la modalità di visualizzazione dalla modalità di modifica:

<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>

Implementiamo i metodi:

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

Modifica il compito della lezione precedente in modo che appaia una colonna con i link per modificare ogni dipendente.