Componente para agregar datos en Vue
Ahora implementemos un formulario para agregar nuevos usuarios. Haremos este formulario en forma de un componente separado. Empecemos con la implementación. Primero, en el componente padre creemos un método para agregar un usuario:
methods: {
add(name, surn) {
let id = this.users.length + 1;
this.users.push({
id,
name,
surn
});
}
}
En la vista del componente padre conectemos el componente hijo:
<template>
<UserForm @add="add" />
</template>
En el componente hijo creemos propiedades para controlar los inputs:
data() {
return {
newName: '',
newSurn: '',
}
}
En el componente hijo creemos un método para guardar los datos:
methods: {
save() {
this.$emit('add', this.newName, this.newSurn);
}
}
Hagamos las vistas del componente hijo:
<template>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
save
</button>
</template>
Implemente un formulario para agregar un nuevo empleado.
