မင်္ဂလာပါခင်ဗျ။
ကျွန်တော်ကတော့ SpiceworksMyanmar Co.,Ltd မှာ Web Developer အနေနဲ့ အလုပ်လုပ်ကိုင်လျက်ရှိသော ဌေးမင်းခေါင် ဖြစ်ပါတယ်။ ယနေ့ တင်ပြပေးသွားမယ့် အကြောင်းအရာကတော့ vue component ကို အသုံးပြုပြီး javascript ကနေ ဘယ်လို ခေါ်သုံးလို့ ရမလဲဆိုတာ ဖြစ်ပါတယ်။
အဲ့ဒါဆို စတင်ပြီး တည်ဆောက်ပါမယ်။ ပထမဦးဆုံး Desktop မှာ Vue ဆိုတဲ့ Folder လေး ဆောက်လိုက်ပါမယ်။ ထို့နောက် Vue folder ကို VS Code ထဲ ထည့်လိုက်ပါမယ်။ VS Code ထဲတွင် index.html ဖိုင် တစ်ခုဆောက်ပါမယ်။ html -> head -> body Tag များ ထည့်ပါမယ်။ ထို့နောက် head tag ထဲတွင် အောက်က ကုဒ်များ ထည့်ပါမယ်။ vue.js ဖိုင်ကိုတော့ Vue.js က ကုဒ်ကို ယူပြီး ထည့်ပါမယ်။
အပေါ်က ကုဒ်ကို ထည့်ပြီးပြီဆိုလျှင်တော့ Bootstrap CSS နဲ့ Js ကို CDN နဲ့ ချိတ်ဆက်ပြီး ထည့်လိုက်ပါပြီ။ ထို့အတွက် Bootstrap Dialog တွေ၊ Bootstrap Components တွေကို သုံးလို့ ရပါပြီ။ အဲ့နောက် Dialog အတွက် Template Component တစ်ခု တည်ဆောက်ပါမယ်။
ID: dialogTmpl နဲ့ Bootstrap Dialog တစ်ခုကို တည်ဆောက်လိုက်ပြီး အထဲတွင် Dialog Title, Body, Name များ ပါဝင်မှာ ဖြစ်ပြီး Close Button နဲ့ Confirm Button နှစ်ခု ရှိပါမယ်။ title ကို {{ title }} data နဲ့ bind ထားပြီး {{ message }}, {{ name }} တို့ကိုလည်း bind ထားပါမယ်။ close button အတွက်ကတော့ Bootstrap Modal Dialog မှာပါတဲ့ data-bs-dismiss ဆိုတဲ့ prop ထည့်ထားတဲ့အတွက် Bootstrap Js က သူ့ဘာသာသူ Dialog ကို ပိတ်ပေးမှာ ဖြစ်ပါတယ်။ Confirm Button မှာ accept Method နဲ့ bind ထားပါမယ်။ အဲ့လို ထည့်ပြီးပြီဆိုလျှင် Vue အတွက် အောက်ပါ ကုဒ်ကို ထည့်ပါမယ်။
ကုဒ်မှာဆိုလျှင် DialogComponent နာမည်နဲ့ Component တစ်ခုကို Assign လုပ်ထားပြီး Vue.extend နဲ့ အပေါ်က ထည့်ထားတဲ့ dialogTmpl ဆိုတဲ့ Component ကို အသုံးပြုပါမယ်။ data မှာ အပေါ်က Bootstrap Modal Dialog မှာ အသုံးပြုခဲ့တဲ့ name, title, message, onAccept (accept function) တို့ကို ထည့်ထားပါမယ်။ dialog ကတော့ bootstrap DOM ကို assign လုပ်ဖို့အတွက် ကြိုထည့်ထားပြီး null ပဲ ထည့်ထားပါမယ်။ အဲ့နောက် Methods တွေထဲမှာ show, hide, accept ဆိုပြီး သုံးခု ထည့်ထားပါမယ်။ show မှာ name, title, message နဲ့ onAccept ဆိုတဲ့ CallBack Function တစ်ခု ထည့်ပါမယ်။ onAccept ကတော့ Dialog က Confirm Button ကို နှိပ်လျှင် လုပ်ဆောင်မယ့် Function အတွက် ဖြစ်ပါမယ်။ အဲ့နောက် show method ထဲမှာ သက်ဆိုင်ရာ data တွေနဲ့ assign လုပ်ပါမယ်။ show method ရဲ့ နောက်ဆုံး this.dlg.show(); ကတော့ Bootstrap Dialog ရဲ့ dialog show ရဲ့ Function ကို ခေါ်လိုက်တာ ဖြစ်ပါတယ်။ အဲ့အတွက် Bootstrap Modal Dialog ပေါ်လာပါမယ်။
ဆက်လက်ပြီး ကုဒ်ကို ဆက်ကြည့်မယ်ဆိုလျှင် hide Method ကို ထည့်ထားပါတယ်။ hide ကတော့ show Method မှာ Assign လုပ်ထားတဲ့ data ထဲက dlg ကို Bootstrap Modal Dialog Function ဖြစ်တဲ့ hide ကို ခေါ်ထားတဲ့အတွက် dialog ကို ပိတ်ပါမယ်။ accept Method ကတော့ Confirm Button ကို နှိပ်လျှင် data ရဲ့ onAccept က null မဖြစ်လျှင် ခေါ်ပေးပါလို့ if condition နဲ့ ထည့်ထားပြီး အဲ့နောက် this.dlg.hide() နဲ့ Dialog ကို ပြန်ပိတ်လိုက်ပါမယ်။
နောက်ဆုံးအပိုင်းကတော့ window.dialog ဆိုပြီး window ကို သွား bind ပြီး မည်သည့်နေရာကနေ မဆို ခေါ်လို့ ရအောင် လုပ်ပါမယ်။ new vue နဲ့ vue application တစ်ခု တည်ဆောက်ပြီး component နဲ့ အပေါ်က DialogComponent ကို ခေါ်လိုက်ပါမယ်။ အခုဆို Dialog အတွက် Vue Component တစ်ခု တည်ဆောက်ပြီး window နဲ့ bind ထားတဲ့အတွက် မိမိ ကြိုက်သည့်နေရာမှာ ခေါ်ပြီး အသုံးပြုနိုင်မည် ဖြစ်ပါတယ်။ အဲ့ဒါဆို အောက်က ကုဒ်ကို ထည့်ပြီး HTML UI အတွက် တည်ဆောက်ပါမယ်။
{{ carts.length }} products in Cart.
{{ product.title }}
{{ product.description }}
ကုဒ်ကို ကြည့်မယ်ဆိုလျှင် @vue:mounted=”init” ကို အတွက် vue ကို mounted လုပ်လိုက်တာနဲ့ init method ကို ခေါ်ပါမယ်။ init Function ကတော့ အောက်က js ကုဒ်ထဲက async init ကို ခေါ်မှာ ဖြစ်ပါတယ်။ <common-dialog ref=”dialog”></common-dialog> ကတော့ အပေါ်က JavaScript ကုဒ်မှာ ကြေညာထားတဲ့ window.dialog က components ထဲက common-dialog ခေါ်ဖို့ အတွက်ဖြစ်ပါတယ်။ အောက်က js မှာ ဆိုလျှင် data တွေမှာ dialog, products နဲ့ carts ဆိုပြီး ထည့်ထားပါမယ်။ dialog ကတော့ confirm, alert dialog တွေအတွက် ဖြစ်ပြီး product တွေနဲ့ product တွေကို cart ထဲထည့်ဖို့ carts ဆိုပြီး ရှိပါမယ်။ init Method မှာ this.products ကို နှစ်ခု ထည့်ထားပါမယ်။ အပေါ်က HTML ကုဒ်မှာဆိုလျှင် ခလုတ် သုံးခု ရှိမှာ ဖြစ်ပြီး addToCart ( carts နဲ့ မပါဘူး ဆိုလျှင် ပြပါမယ် ), removeFromCart ( carts ထဲ ပါမယ်ဆိုလျှင် ပြပါမယ် ) နဲ့ product ကို ပြန်ဖြုတ်ဖို့အတွက် remove Method ကို ခေါ်ထားပါမယ်။ အခုဆက်လက်ပြီး အောက်က js ကို ရှင်းပြပေးသွားပါမယ်။
အပေါ်က js ကုဒ်ကို ကြည့်မယ်ဆိုလျှင် init မှာ this.dialog ကို အထက်ပါ ကြေညာထားတဲ့ window.dialog ထဲက HTML ကုဒ်ထဲမှာ ထည့်ထားတဲ့ dialogID ကို Bootstrap Dialog အနေနဲ့ အသုံးပြုပါမယ်။ ထို့နောက် products ထဲမှာ နှစ်ခု ထည့်ပါမယ်။ addToCart Method တစ်ခု ထည့်ပြီး this.carts ထဲကို product ကို ထည့်ပါမယ်။ ပြီးလျှင် this.dialog.show ဆိုပြီး ထည့်လိုက်တာ အောင်မြင်ကြောင်း alert dialog ပြပါမယ်။ အဲ့မှာ ကြည့်မယ်ဆိုလျှင် onAccept အတွက် parameter မထည့်ထားတဲ့အတွက် Dialog မှာ Confirm ခလုတ် ပျောက်နေပါမယ်။ ဆက်လက်ပြီး removeFromCart အတွက် Method တစ်ခု တည်ဆောက်ပြီး မိမိ Cart ထဲက ဖြုတ်မည့် Product ကို indexOf နဲ့ index number ကို ရှာပြီး ရှိတယ်ဆို splice နဲ့ cart ဆိုတဲ့ array ကနေ ဖြုတ်လိုက်ပါမယ်။ ပြီးလျှင် ဖြုတ်လိုက်ပြီ ဖြစ်ကြောင်း alert dialog ကို ပြပါမယ်။ အဲ့နောက် Product remove အတွက် remove ဆိုတဲ့ Method တစ်ခု ထည့်ပါမယ်။ အဲ့မှာ Confirm Dialog ကို ပြမှာ ဖြစ်ပြီး product ကို indexOf နဲ့ ရှာပြီး this.products ဆိုတဲ့ products array ထဲကနေ splice နဲ့ ဖြုတ်လိုက်ပါမယ်။ အခုဆိုလျှင် Product, Cart နဲ့ ဥပမာပြပြီး Vue Component ကို Common Dialog ပုံစံ အသုံးပြုပြီး တင်ပြသွားခြင်း ဖြစ်ပါတယ်။ အခု တင်ပြသွားတဲ့ vue သည် Vue3 မဟုတ်ပဲ Vue2.7 ကို အသုံးပြုထားခြင်းဖြစ်ပါတယ်။ ကုဒ်အပြည့်အစုံကို အောက်က GitHub တွင် Download ဆွဲ၍ လေ့လာနိုင်ပါတယ် ခင်ဗျ။
https://github.com/Spiceworks-Myanmar/cdn/blob/main/Vue.zip
အခုလို အချိန်ပေး ဖတ်ရှုပေးတဲ့အတွက် ကျေးဇူးအများကြီးတင်ပါတယ်။ ဆက်လက်၍လည်း ဗဟုသုတရဖွယ် ပို့စ်များ တင်ပေးသွားဦးမှာ ဖြစ်တဲ့အတွက် လာရောက် အားပေးဖတ်ရှုပေးဖို့ တိုက်တွန်းလိုက်ရင်း ပို့စ်လေးကို ဒီနေရာမှာပဲ အဆုံးသတ်လိုက်ပါရစေ။ သာယာပျော်ရွင်သော နေ့ရက်လေးများ ပိုင်ဆိုင်နိုင်ကြပါစေခင်ဗျ။
