Reactief bewerken van componentgegevens in Vue

Laten we nu het bewerken van gegevens van onze child componenten implementeren. Laten we eerst in de parent component een methode maken om een gebruiker aan te passen op basis van zijn id:

methods: {
	change(id, name, surn) {
		this.users = this.users.map((user) => {
			if (user.id === id) {
				user.name = name;
				user.surn = surn;
			}
			return user;
		});
	}
}

Laten we componenten in een lus maken, en hen de naam, achternaam, id en de methode om te wijzigen doorgeven:

<template>
	<User
		v-for   ="user in users"
		
		:id     ="user.id"
		:name   ="user.name"
		:surn   ="user.surn"
		:key    ="user.id"
		@change="change"
	/>
</template>

Laten we de uitgezonden gebeurtenis in de configuratie emits van de child component specificeren:

props: {
	id:     Number,
	name:   String,
	surn:   String,
},
emits: ['change'],

Laten we nu in de child component een eigenschap maken die de modus van de component bepaalt, weergave of bewerking:

data() {
	return {
		isEdit: false,
	}
}

Laten we ook eigenschappen maken om de werking van invoervelden voor bewerking te ondersteunen:

data() {
	return {
		isEdit: false,
		newName: '',
		newSurn: '',
	}
}

Laten we ervoor zorgen dat de beginwaarden van deze eigenschappen worden overgenomen uit de props:

data() {
	return {
		isEdit: false,
		newName: this.name,
		newSurn: this.surn,
	}
}

Laten we een methode maken die de bewerkingsmodus activeert:

methods: {
	edit() {
		this.isEdit = true;
	}
}

Laten we een methode maken die de bewerkte gegevens opslaat en tegelijkertijd de bewerkingsmodus uitschakelt:

methods: {
	save() {
		this.isEdit = false;
		this.$emit('change', this.id, this.newName, this.newSurn);
	}
}

Laten we de weergave van de child component maken:

<template>
	<template v-if="!isEdit">
		{{ name }}
		{{ surn }}
		<button @click="edit">
			bewerk
		</button>
	</template>
	<template v-else>
		<input v-model="newName">
		<input v-model="newSurn">
		<button @click="save">
			opslaan
		</button>
	</template>
</template>

Implementeer het bewerken van gegevens van de component Employee.