Vue တွင် ဒေတာများ ထည့်သွင်းရန် ကွန်ပိုနန်
ယခု အသုံးပြုသူအသစ်များထည့်ရန် ဖောင်တစ်ခုကို အကောင်အထည်ဖော်ကြပါစို့။ ဤဖောင်ကို သီးခြားကွန်ပိုနန် တစ်ခုအဖြစ် ပြုလုပ်ပါမည်။ အကောင်အထည်ဖော်ခြင်းကို စတင်လိုက်ကြပါစို့။ စတင်ရန် မိဘကွန်ပိုနန် အတွင်း အသုံးပြုသူထည့်သွင်းရန် နည်းလမ်းတစ်ခု ပြုလုပ်ပါမည်။
methods: {
add(name, surn) {
let id = this.users.length + 1;
this.users.push({
id,
name,
surn
});
}
}
မိဘကွန်ပိုနန်၏ အမြင်ပုံစံတွင် ကလေးကွန်ပိုနန် ချိတ်ဆက်ပါမည်။
<template>
<UserForm @add="add" />
</template>
ကလေးကွန်ပိုနန်၌ input များကို ထိန်းချုပ်ရန် ဂုဏ်သတ္တိများ ပြုလုပ်ပါမည်။
data() {
return {
newName: '',
newSurn: '',
}
}
ကလေးကွန်ပိုနန်၌ ဒေတာများသိမ်းဆည်းရန် နည်းလမ်းတစ်ခု ပြုလုပ်ပါမည်။
methods: {
save() {
this.$emit('add', this.newName, this.newSurn);
}
}
ကလေးကွန်ပိုနန်၏ အမြင်ပုံစံများ ပြုလုပ်ပါမည်။
<template>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
save
</button>
</template>
ဝန်ထမ်းအသစ်ထည့်သွင်းရန် ဖောင်တစ်ခုကို အကောင်အထည်ဖော်ပါ။
