Реактивно уредување на податоци на компонента во Vue

Ајде сега да ја имплементираме функцијата за уредување на податоците на нашите детски компоненти. За почеток, во родителската компонента да направиме метод за промена на корисникот според неговиот id:

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

Да ги креираме компонентите во циклус, пренесувајќи им како параметри името, презимето, id и методот за промена:

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

Да ја запишеме emit-наата настанот во поставката emits на детската компонента:

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

Сега во детската компонента да направиме својство кое ќе го одредува режимот на компонентата, приказ или уредување:

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

Да направиме и својства за поддршка на работата на полињата за внесување за уредување:

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

Да направиме така што почетните вредности на овие својства да се земаат од пропсите:

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

Да направиме метод кој ќе го активира режимот на уредување:

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

Да направиме метод кој ќе ги зачувува изменетите податоци, истовремено исклучувајќи го режимот на уредување:

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

Да го направиме приказот на детската компонента:

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

Имплементирајте уредување на податоци на компонентата Employee.