Componente para Adicionar Dados em Vue
Vamos agora implementar um formulário para adicionar novos usuários. Faremos este formulário na forma de um componente separado. Vamos começar a implementação. Primeiro, no componente pai, vamos criar um método para adicionar um usuário:
methods: {
add(name, surn) {
let id = this.users.length + 1;
this.users.push({
id,
name,
surn
});
}
}
No template do componente pai, vamos incluir o componente filho:
<template>
<UserForm @add="add" />
</template>
No componente filho, vamos criar propriedades para controlar os inputs:
data() {
return {
newName: '',
newSurn: '',
}
}
No componente filho, vamos criar um método para salvar os dados:
methods: {
save() {
this.$emit('add', this.newName, this.newSurn);
}
}
Vamos criar o template do componente filho:
<template>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
salvar
</button>
</template>
Implemente um formulário para adicionar um novo funcionário.
