Vue တွင် Event ဖြင့် Form Data ရယူခြင်း

ကျွန်ုပ်တို့မှာ button တစ်ခုနှင့် နံပါတ်ထည့်သွင်းရန် input တစ်ခုရှိသည်ဆိုပါစို့။ Button ကိုနှိပ်လိုက်ချိန်တွင် input ထဲသို့ထည့်လိုက်သော နံပါတ်၏ နှစ်ထပ်ကိန်းကို ထုတ်ပြရန် လုပ်ဆောင်ကြပါစို့။ အကောင်အထည်ဖော်ခြင်းကို စတင်လိုက်ကြပါစို့။

ဤပြဿနာကိုဖြေရှင်းရန် ဂုဏ်သတ္တိ (property) နှစ်ခု လိုအပ်ပါမည်။ num ဂုဏ်သတ္တိသည် input ထဲသို့ data များထည့်သွင်းသည့်အခါ အလိုက်သင့်ပြောင်းလဲသွားမည်ဖြစ်ပြီး၊ res ဂုဏ်သတ္တိထဲတွင် နှစ်ထပ်ကိန်းတင်ခြင်း၏ ရလဒ်ကို ကျွန်ုပ်တို့ရေးထည့်သွားမည်ဖြစ်သည်။

javascriptdata() {
  return {
    num: 0,
    res: 0
  }
}

ယခု input တစ်ခုလုပ်ကြပါစို့၊ ၎င်းကို num ဂုဏ်သတ္တိဖြင့် ချိတ်ဆက်ပါ (bind လုပ်ပါ)၊ button လုပ်ပါ၊ အဆိုပါ button ကိုနှိပ်လိုက်ချိန်တွင် calc method ကို ခေါ်ယူအလုပ်လုပ်စေပါ၊ ထို့အပြင် ရလဒ်ကိုထုတ်ပြရန် စာပိုဒ် (paragraph) တစ်ခုလည်း လုပ်ပါ။

App.vue<template>
  <p>{{ res }}</p>
  <input v-model="num">
  <button v-on:click="calc">work</button>
</template>

ယခု calc method ၏ အကောင်အထည်ဖော်ချက်ကို ရေးကြပါစို့။

javascriptmethods: {
  calc: function() {
    this.res = this.num ** 2;
  }
}

ထိုသို့ဆိုလျှင် calc method ကိုခေါ်လိုက်သည်နှင့် (ထိုသို့ဖြစ်ရန် button ကိုနှိပ်လိုက်ခြင်းကြောင့်ဖြစ်သည်)၊ res ဂုဏ်သတ္တိထဲသို့ ရလဒ်မှတ်တမ်းတင်သွားမည်ဖြစ်ပြီး တစ်ချိန်တည်းမှာပင် ကျွန်ုပ်တို့၏ စာပိုဒ်ထဲတွင် ပြသသွားမည်ဖြစ်သည်။