Komponent për shtimin e të dhënave në Vue

Tani le të implementojmë një formë për shtimin e përdoruesve të rinj. Këtë formë do ta bëjmë në formën e një komponenti të veçantë. Le të fillojmë implementimin. Për fillim, në komponentin prind të bëjmë një metodë për shtimin e përdoruesit:

methods: {
	add(name, surn) {
		let id = this.users.length + 1;
		
		this.users.push({
			id,
			name,
			surn
		});
	}
}

Në pamjen e komponentit prind le të lidhim komponentin fëmijë:

<template>
	<UserForm @add="add" />
</template>

Në komponentin fëmijë le të krijojmë vetitë për kontrollin e inputeve:

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

Në komponentin fëmijë le të krijojmë një metodë për ruajtjen e të dhënave:

methods: {
	save() {
		this.$emit('add', this.newName, this.newSurn);
	}
}

Le të krijojmë pamjet e komponentit fëmijë:

<template>
	<input v-model="newName">
	<input v-model="newSurn">
	
	<button @click="save">
		save
	</button>
</template>

Implementoni një formë për shtimin e një punonjësi të ri.