Vue'da ma'lumot qo'shish uchun komponent
Keling endi yangi foydalanuvchilar qo'shish uchun formani amalga oshiramiz. Ushbu formani alohida komponent ko'rinishida qilamiz. Amalga oshirishni boshlaymiz. Boshlash uchun ota-komponentda foydalanuvchi qo'shish uchun metod yaratamiz:
methods: {
add(name, surn) {
let id = this.users.length + 1;
this.users.push({
id,
name,
surn
});
}
}
Ota-komponentning ko'rinishida bola komponentni ulaymiz:
<template>
<UserForm @add="add" />
</template>
Bola komponentda inputlarni boshqarish uchun xususiyatlar yaratamiz:
data() {
return {
newName: '',
newSurn: '',
}
}
Bola komponentda ma'lumotlarni saqlash uchun metod yaratamiz:
methods: {
save() {
this.$emit('add', this.newName, this.newSurn);
}
}
Bola komponentning ko'rinishlarini yaratamiz:
<template>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
saqlash
</button>
</template>
Yangi xodim qo'shish uchun formani amalga oshiring.
