Տվյալների ավելացման կոմպոնենտ Vue-ում

Եկեք հիմա իրականացնենք ֆորմա նոր օգտատերեր ավելացնելու համար։ Այս ֆորման մենք կստեղծենք որպես առանձին կոմպոնենտ։ Սկսենք իրականացնել։ Սկզբից ծնող կոմպոնենտում կստեղծենք մեթոդ օգտատեր ավելացնելու համար։

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

Ծնող կոմպոնենտի ներկայացման մեջ կմիացնենք դուստր կոմպոնենտը։

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

Դուստր կոմպոնենտում կստեղծենք հատկություններ դաշտերի կառավարման համար։

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

Դուստր կոմպոնենտում կստեղծենք մեթոդ տվյալները պահպանելու համար։

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

Կստեղծենք դուստր կոմպոնենտի ներկայացումները։

<template>
	<input v-model="newName">
	<input v-model="newSurn">
	
	<button @click="save">
		պահպանել
	</button>
</template>

Իրականացրեք ֆորմա նոր աշխատող ավելացնելու համար։