Vue'da Veri Ekleme Bileşeni
Şimdi yeni kullanıcılar eklemek için bir form uygulayalım. Bu formu ayrı bir bileşen olarak yapacağız. Uygulamaya başlayalım. Başlangıç olarak, ana bileşende kullanıcı eklemek için bir metod yapalım:
methods: {
add(name, surn) {
let id = this.users.length + 1;
this.users.push({
id,
name,
surn
});
}
}
Ana bileşenin görünümüne alt bileşeni ekleyelim:
<template>
<UserForm @add="add" />
</template>
Alt bileşende input'ları kontrol etmek için özellikler yapalım:
data() {
return {
newName: '',
newSurn: '',
}
}
Alt bileşende verileri kaydetmek için bir metod yapalım:
methods: {
save() {
this.$emit('add', this.newName, this.newSurn);
}
}
Alt bileşenin görünümlerini yapalım:
<template>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
kaydet
</button>
</template>
Yeni çalışan eklemek için bir form uygulayın.
