Component for adding data in Vue

Let's now implement a form for adding new users. We will make this form as a separate component. Let's start implementing it. First, in the parent component, we will make a method for adding a user:

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

In the parent component view, we connect the child:

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

In the child component we will create properties to control inputs:

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

In the child component, we will create a method for saving data:

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

Let's create views for the child component:

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

Implement a form to add a new employee.