Давайте теперь реализуем форму для добавления новых юзеров. Эту форму мы сделаем в виде отдельного компонента. Приступим к реализации. Для начала в родительском компоненте сделаем метод для добавления юзера:
methods: {
add(name, surn) {
let id = this.users.length;
this.users.push({
id
name,
surn
});
}
}
В представлении родительского компонента подключим дочерний:
<template>
<UserForm :add="add" />
</template>
В дочернем компоненте сделаем свойства для контроля инпутов:
data() {
return {
newName: '',
newSurn: '',
}
}
В дочернем компоненте сделаем метод для сохранения данных:
methods() {
save() {
$emit('add', newName, newSurn);
}
}
Сделаем представления дочернего компонента:
<template>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
save
</button>
</template>
Реализуйте форму для добавления нового работника.