VueJs 2 – 04 Event එක්ක වැඩ කරමු

Reading Time: 4 minutes

හැමෝටම එසේම වේවා 😀 ! Vue ගැන ලියන 4 වෙනි post එක. කලින් post එකේදි අපි Vue directives ගැන කතා කරානෙ. ඒකෙදි කිව්ව වගේම අද කියන්න යන්නෙ Vue වලින් events handle කරන්නෙ කොහොමද කියල. මං හිතනව ඔයාල events කියන්නෙ මොනවද කියල දන්නව ඇති කියල. mouse click, drag, keyup, keydown ඔය වගේ ඒවනෙ. (ඒ වගේම අපිට custom event උනත් හදන්න පුළුවන්නෙ) මේ events වලට event listeners set කරන්න v-on කියන directive එක භාවිතා කරනව. v-on එකට මේ වගේ syntax එකක් තමයි තියෙන්නෙ.

v-on:event=”expression or method“

මේකෙ event කියන්නෙ අපි listen කරන event එක.(click, keyup, keydown, submit වගේ) ඒකට value එක විදියට දෙන්න ඕනෙ, ඒ event එක trigger උනාම වෙන්න ඕනෙ මොකද්ද කියල. ඒකට ඕන නම් එතනම expression එකක් ලියන්නත් පුළුවන් නැත්තම් (methods object එකේ) define කරපු method එකක් දෙන්න පුළුවන්. අපි උදාහරණයකින් බලමු කොහොමද මේක කරන්නෙ කියල.

මගේ data object එකේ තියෙන age කියන අගය button එකක් click කරද්දි එකකින් වැඩි වෙන්න ඕනෙ කියල හිතමු.

data: {
    age: 25
}

<div id="my-app">
    <h1> My age is {{ age }}</h1>
    <button v-on:click="age++">+</button>
</div> 

මෙන්න මේ විදියට ඔයාලට පුළුවන් v-on directive එක පාවිචිච කරල button එකට click event listener එකක් set කරන්න. එතකොට ඒ button එක click කරද්දි  age++ කියන code එක run වෙනව. එතකොට age කියන data එක, එකකින් increment වෙනව. h1 tag එකෙන් ඒක වෙනස් වෙනව බලාගන්න පුළුවන්.

මේ විදියටම ඔයාලට පුළුවන් button එක click කරද්දි method එකක් call කරන්න. මේ වගේ,

data: {
    age: 25
},
methods: {
    inc_age: function (i) {
        this.age += i
    }
}

<div id="my-app">
    <h1> My age is {{ age }}</h1>
    <button v-on:click="inc_age(2)">+</button>
</div>

මේ විදියට ඔයාලට කැමති event එකකට (custom event උනත්) listen කරන්න පුළුවන්.

event modifier

v-on directive එකෙන් event listener set කරද්දි, ඒව එක එක විදියට modify කරන්න පුළුුවන්. හිතන්නකො මේ කලින් උදාහරණයෙ button click event එකම. ඒ event එක එක පාරක් විතරක් listen කරන්න ඕනෙ නම් (ඒ කියන්නෙ පළවෙනි click එකෙන් පස්සෙ එ් listener එක වැඩ කරන්නෙ නැතිවෙන්න නම්) once කියන modifier එක පාවිච්චි කරන්න පුළුවන්. මේ විදියට.

v-on:click.once="inc_age(2)"

form එකක් submit කරන අවස්ථාවක් ගමුකො තව උදාහරණයකට. normal විදියට form එක submit කරද්දි form එකේ data ටික, post වෙලා, page එක reload වෙන එකනෙ වෙන්නෙ. හැබැයි අපි SPA එකක් වගේ හදනවනම්, (මම පළවෙනි post එකේ කිව්ව වගේ) අපි page reload කරන්නෙ නෑ. ඒ වෙනුවට අපි කරන්නෙ, form එක submit කරද්දි, AJAX request එකකින් මේ data ටික back-end එකට post කරන එක. අපි හිතමුකො ඒ post කරන එකට අදාල code එක, onSubmit කියල method එකක අපි ලිව්ව කියල. එතකොට form එක මේ වගේ තියෙයි.

<div id="my-app">

    <form v-on:submit="onSubmit">
        Name: <input type="text" v-model="name">
        <button type="submit">Submit</button
    </form>
</div>

app.js

const app = new Vue({
    el: '#my-app',
    data: {
        name: 'John Doe'
    },
    methods: {
    	onSubmit: function () {
    	    alert(this.name);
    	}
    }
});

මම මතෙනදි නිකංම name එක alert කරන එක විතරයි කරන්නෙ. (ඉදිරි post එකකින් බලමු, කොහොමද AJAX request handle කරන්නෙ කියල) දැන් මේ submit button එක click කරොත් name එක alert වෙනව පෙනේවි. හැබැයි ඒක OK කරාට පස්සෙ, page එක reload වෙනව ඔයාලට බලාගන්න පුළුවන් වෙයි. ඒකට හේතුව, submit button එකේ default action එක. අපි ඒක නවත්තන්න ඕනෙ. .prevent modifier එකෙන් ඒක කරන්න පුළුවන්.

v-on:submit.prevent="onSubmit"

මේ විදියට වෙනස් කරාම page එක reload වෙන්නෙ නෑ කියල ඔයාලට පෙනෙයි. 😀

තව දෙයක් කියන්න ඕනෙ මේ එක්කම. මේ උදාහරණයෙදි ඔයාලට පේනව ඇති text field එකේ තියෙන value මම අරගත්තු විදිය. සාමාන්‍යන් JQuery වගේ යොදාගෙන text field එකේ value එක save කරගන්න නම්, ඉස්සෙල්ලම DOM එක search කරල මේ text field එක හොයා ගන්න ඕනෙ. ඊට පස්සෙ තමයි ඒකෙ value එක අරගන්නෙ. හැබැයි Vue වලින් අපිට පහසුවෙන්ම 2 way විදියට data bind කරන්න පුලුවන් නිසා, සෑහෙන්න ලේසියෙන් value එක ගන්න පුළුවන්. කරන්න තියෙන්නෙ v-model directive එක පාවිච්චි කරන්න විතරයි. එතකොට text field එකේ type කරන දේ ඒ මොහොතෙදිම name කියන data එකේ save වෙනව.

key modifier

මේ උදාහරණය බලන්නකො. මට ඕනෙ මේ text field එකේ type කරන එක, Enter key එක එබුවම browser console එකේ print කරන්න. (console එක ගැන පළවෙනි post එකේ කිව්ව මතක ඇති)

<div id="my-app">
    Name: <input type="text" v-model="name">
</div>

මේ වැඩේ කරගන්න අපිට keyDown event එකට .enter කියන key modifier එක පාවිච්චි කරන්න පුළුවන්. මේ විදියට,

<div id="my-app">
    Name: <input type="text" v-model="name" v-on:keyDown.enter="logMessage">
</div>

app.js

const app = new Vue({
    el: '#my-app',
    data: {
    	name: 'John Doe',
    },
    methods: {
    	logMessage: function () {
    	    alert(this.name);
    	    this.name = '';
    	}
    }
});

මේක run කරල බැලුවම මේ වගේ console එකේ print වෙනව බලා ගන්න පුළුවන්.

v-model භාවිතා කිරීමේ තවත් වාසියක් මෙතනදි බලාගන්න පුළුවන්. logMessage method එකේ 2වනි පේළියෙදි name=” කියල දීල තියෙනව. මේකෙන් වෙන්නෙ, enter key එක ඔබන හැම වතාවකදිම, input field එක clear කරන එක. මොකද, (කලින් post එකේ කිව්ව වගේ) data වලට වෙන වෙනස්වීම් දිහා Vue වලින් බලාගෙන ඉන්න නිසා, ඒ data වෙනස් වෙද්දි, ඒ data bind වෙලා තියෙන හැම තැනමත්, ඒ විදියටම වෙනස් වෙනව.

තව දෙයක් තියෙනව. අපිට ඕනෙ නම් key combination එකක් (alt+enter, shift+enter වගේ) උනත් යොදන්න පුළුවන්. Alt+Enter key combination එක පාවිච්චි කරන්නම් .alt modifier එක පාවිච්චි කරන්නයි තියෙන්නෙ.

v-on:keyDown.alt.enter="logMessage"

මේ විදියට .shift .ctrl වගේ key උනත් භාවිතා කරන්න පුළුවන්.

v-on directive එක පාවිච්චි කරද්දි හැමතිස්සෙම v-on, v-on කියල ලියන එක කරදරයක් නම්, ඔයාලට පුළුවන් ඒ වෙනුවට @ symbol එක භාවිතා කරන්නත්. මේ වගේ,

@click="some_method"

මේවගේ modifier වර්ග තව තියෙනව. මේවයෙ තවත් විස්තර ඔයාලට VueJs.org එකෙන් බලන්න පුළුවන්. මම අදට මෙතනින් නවත්තන්නම්. ඊළඟ post එකෙන් හමුවෙමු. අදහස්, යෝජනා, ඡෝදනා, ප්‍රශ්න මොනවහරි තියෙනම් comment එකක් දාන්න. 😀

ඊළඟ post එකට මෙතනින් යන්න.