Vue တွင် Event ဖြင့် Form Data ရယူခြင်း
ကျွန်ုပ်တို့မှာ button တစ်ခုနှင့် နံပါတ်ထည့်သွင်းရန် input တစ်ခုရှိသည်ဆိုပါစို့။ Button ကိုနှိပ်လိုက်ချိန်တွင် input ထဲသို့ထည့်လိုက်သော နံပါတ်၏ နှစ်ထပ်ကိန်းကို ထုတ်ပြရန် လုပ်ဆောင်ကြပါစို့။ အကောင်အထည်ဖော်ခြင်းကို စတင်လိုက်ကြပါစို့။
ဤပြဿနာကိုဖြေရှင်းရန် ဂုဏ်သတ္တိ (property) နှစ်ခု လိုအပ်ပါမည်။ num ဂုဏ်သတ္တိသည်
input ထဲသို့ data များထည့်သွင်းသည့်အခါ အလိုက်သင့်ပြောင်းလဲသွားမည်ဖြစ်ပြီး၊
res ဂုဏ်သတ္တိထဲတွင် နှစ်ထပ်ကိန်းတင်ခြင်း၏ ရလဒ်ကို ကျွန်ုပ်တို့ရေးထည့်သွားမည်ဖြစ်သည်။
data() {
return {
num: 0,
res: 0
}
}
ယခု input တစ်ခုလုပ်ကြပါစို့၊ ၎င်းကို
num ဂုဏ်သတ္တိဖြင့် ချိတ်ဆက်ပါ (bind လုပ်ပါ)၊ button လုပ်ပါ၊
အဆိုပါ button ကိုနှိပ်လိုက်ချိန်တွင် calc method ကို ခေါ်ယူအလုပ်လုပ်စေပါ၊
ထို့အပြင် ရလဒ်ကိုထုတ်ပြရန် စာပိုဒ် (paragraph) တစ်ခုလည်း လုပ်ပါ။
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">work</button>
</template>
ယခု calc method ၏ အကောင်အထည်ဖော်ချက်ကို ရေးကြပါစို့။
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
ထိုသို့ဆိုလျှင် calc method ကိုခေါ်လိုက်သည်နှင့် (ထိုသို့ဖြစ်ရန် button ကိုနှိပ်လိုက်ခြင်းကြောင့်ဖြစ်သည်)၊
res ဂုဏ်သတ္တိထဲသို့ ရလဒ်မှတ်တမ်းတင်သွားမည်ဖြစ်ပြီး တစ်ချိန်တည်းမှာပင် ကျွန်ုပ်တို့၏ စာပိုဒ်ထဲတွင် ပြသသွားမည်ဖြစ်သည်။
Input တစ်ခုပေးထားသည်။ Button တစ်ခုပေးထားသည်။ စာပိုဒ်တစ်ခုပေးထားသည်။ Input ထဲသို့ နံပါတ်တစ်ခုထည့်သွင်းသည်။ Button ကိုနှိပ်လိုက်ချိန်တွင် စာပိုဒ်ထဲတွင် ထိုနံပါတ်၏ နှစ်ထပ်ကိန်းရင်း (square root) ပေါ်လာစေရန် ပြုလုပ်ပါ။
Input နှစ်ခုပေးထားသည်။ Button တစ်ခုပေးထားသည်။ စာပိုဒ်တစ်ခုပေးထားသည်။ Input တစ်ခုစီထဲသို့ နံပါတ်များထည့်သွင်းကြသည်။ Button ကိုနှိပ်လိုက်ချိန်တွင် စာပိုဒ်ထဲတွင် ထိုနံပါတ်များ၏ ပေါင်းလဒ်ပေါ်လာစေရန် ပြုလုပ်ပါ။
Input နှစ်ခုပေးထားသည်။ Button တစ်ခုပေးထားသည်။ Input တစ်ခုစီထဲသို့ မည်သည့်စာသားမဆို ရိုက်ထည့်ကြသည်။ Button ကိုနှိပ်လိုက်ချိန်တွင် ပထမ input ၏ စာသားသည် ဒုတိယ input ထဲသို့ ရောက်ရှိသွားစေရန်နှင့် ဒုတိယ input ၏ စာသားသည် ပထမ input ထဲသို့ ရောက်ရှိသွားစေရန် ပြောင်းလဲပေးပါ။
Input တစ်ခု၊ စာပိုဒ် 3 ခုနှင့် button တစ်ခုပေးထားသည်။ Input ထဲသို့ အကွာအဝေးဖြင့် ခွဲထားသော သုံးစွဲသူ၏ အမည်အပြည့်အစုံ (အမည်၊ အဖအမည်၊ မိသားစုအမည်) ကို ထည့်သွင်းကြသည်။
Button ကိုနှိပ်လိုက်ချိန်တွင် ပထမစာပိုဒ်ထဲတွင် သုံးစွဲသူ၏ မိသားစုအမည်၊ ဒုတိယစာပိုဒ်ထဲတွင် အမည်၊ တတိယစာပိုဒ်ထဲတွင် အဖအမည် ပေါ်လာစေရန် ပြုလုပ်ပါ။
