Uhariri Tendaji wa Data ya Sehemu ya Mtandao katika Vue

Hebu sasa tutekeleze uhariri wa data ya sehemu zetu za mtandao za watoto. Kuanzia, katika sehemu ya mzazi tutafanye njia ya kubadilisha user kwa kutumia id yake:

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

Tutundie sehemu za mtandao kwenye mzunguko, tukiwapa kigezo jina, surname, id na njia ya kubadilisha:

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

Tuweke tukio linalotokana kwenye usanidi emits ya sehemu ya mtandao ya mtoto:

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

Sasa katika sehemu ya mtandao ya mtoto tufanye sifa, ambayo itaweka hali ya sehemu ya mtandao, onyesho au uhariri:

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

Tutengeneze pia sifa za kusaidia utendakazi wa vingingi kwa uhariri:

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

Tufanye ili thamani za awali za sifa hizi zichukuliwe kutoka kwa props:

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

Tutengeneze njia, ambayo itawasha hali ya uhariri:

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

Tutengeneze njia, ambayo itahifadhi data iliyohaririwa, ikizima hali ya uhariri:

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

Tutengeneze muonekano wa sehemu ya mtandao ya mtoto:

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

Tekeleza uhariri wa data ya sehemu ya mtandao Employee.