Vue တွင် ဒေတာများ ထည့်သွင်းရန် ကွန်ပိုနန်

ယခု အသုံးပြုသူအသစ်များထည့်ရန် ဖောင်တစ်ခုကို အကောင်အထည်ဖော်ကြပါစို့။ ဤဖောင်ကို သီးခြားကွန်ပိုနန် တစ်ခုအဖြစ် ပြုလုပ်ပါမည်။ အကောင်အထည်ဖော်ခြင်းကို စတင်လိုက်ကြပါစို့။ စတင်ရန် မိဘကွန်ပိုနန် အတွင်း အသုံးပြုသူထည့်သွင်းရန် နည်းလမ်းတစ်ခု ပြုလုပ်ပါမည်။

App.vuemethods: {
  add(name, surn) {
    let id = this.users.length + 1;
    
    this.users.push({
      id,
      name,
      surn
    });
  }
}

မိဘကွန်ပိုနန်၏ အမြင်ပုံစံတွင် ကလေးကွန်ပိုနန် ချိတ်ဆက်ပါမည်။

App.vue<template>
  <UserForm @add="add" />
</template>

ကလေးကွန်ပိုနန်၌ input များကို ထိန်းချုပ်ရန် ဂုဏ်သတ္တိများ ပြုလုပ်ပါမည်။

components/UserForm.vuedata() {
  return {
    newName: '',
    newSurn: '',
  }
}

ကလေးကွန်ပိုနန်၌ ဒေတာများသိမ်းဆည်းရန် နည်းလမ်းတစ်ခု ပြုလုပ်ပါမည်။

components/UserForm.vuemethods: {
  save() {
    this.$emit('add', this.newName, this.newSurn);
  }
}

ကလေးကွန်ပိုနန်၏ အမြင်ပုံစံများ ပြုလုပ်ပါမည်။

components/UserForm.vue<template>
  <input v-model="newName">
  <input v-model="newSurn">
  
  <button @click="save">
    save
  </button>
</template>