Reaktiewe redigering van komponentdata in Vue

Laat ons nou die redigering van ons kindkomponente se data implementeer. Eerstens, maak 'n metode om die gebruiker volgens sy id te verander in die ouerkomponent:

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

Skep komponente in 'n lus, en stuur die naam, van, id en die veranderingsmetode as parameters deur:

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

Definieer die uitgestraalde gebeurtenis in die emits opset van die kindkomponent:

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

Nou maak ons 'n eienskap in die kindkomponent wat die komponent se modus sal bepaal, vertoon of redigering:

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

Maak ook eienskappe om die werking van invoervelde vir redigering te ondersteun:

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

Sorg dat die beginwaardes van hierdie eienskappe van die props geneem word:

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

Maak 'n metode wat die redigeringsmodus sal aktiveer:

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

Maak 'n metode wat die geredigeerde data sal stoor en terselfdertyd die redigeringsmodus sal deaktiveer:

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

Maak die voorstelling van die kindkomponent:

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

Implementeer die redigering van data van die Employee komponent.