Komponentti tiedon lisäämiseen Vue:ssa
Toteutetaan nyt lomake uusien käyttäjien lisäämiseen. Teemme tästä lomakkeesta erillisen komponentin. Aloitetaan toteutus. Aluksi vanhemmakomponentissa teemme menetelmän käyttäjän lisäämiseksi:
methods: {
add(name, surn) {
let id = this.users.length + 1;
this.users.push({
id,
name,
surn
});
}
}
Vanhemman komponentin näkymässä liitämme lapsikomponentin:
<template>
<UserForm @add="add" />
</template>
Lapsikomponentissa luomme ominaisuudet syötekenttien hallintaan:
data() {
return {
newName: '',
newSurn: '',
}
}
Lapsikomponentissa teemme menetelmän tietojen tallentamiseen:
methods: {
save() {
this.$emit('add', this.newName, this.newSurn);
}
}
Luodaan lapsikomponentin näkymät:
<template>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
tallenna
</button>
</template>
Toteuta lomake uuden työntekijän lisäämiseen.
