Hallo teman-teman kembali lagi di artikel dumet school, oke kali ini kita akan membahas tentang javascript framework yaitu VUE JS . Kita akan membahas event listener pada vue js tepatnya Cara Menggunakan Events Modifier Pada Framework Vue Js. Event pada javascript akan membuat web kita menjadi lebih interaktif dimana akan melakukan suatu respon/aksi berdasarkan event yang telah ditentukan yang akan memicu jalannya script Javascript yang ada di dalam web tersebut.

Setelah sebelumnya kita telah membahas tentang event itu sendiri nah sekarang kita akan membahas tentang events modifier, Nah apa sih event modifier ? Simple nya seperti ini teman-teman tag element HTML itu memiliki sifatnya sendiri-sendiri nah fungsi modifier di sini adalah untuk menghilangkan sifat bawaan dari DOM itu sendiri misal kita memiliki sebuah tag element link seperti ini :

<a v-on:click="alert()" href="https://dumetschool.com">Dumet School</a>
// Events
const vue = new Vue({
    el : '#vue-app',
    data : {
        age: 26,
    },
    methods: {
        alert: () => {
            alert('Hai ughty');
        }
    },
});

Jika program di atas di jalankan lalu kita click link tersebut maka yang terjadi bukanya hanya memanggil method alert(), Dia juga akan melakukan redirect page ke link atau halaman yang di tuju sesuai difat dari hyper link.

Nah yang kita mau saat kita click link tersebut hanya memanggil method alert(), untuk melakukanya di vue js kita memerlukan yang namanya modifier, Mari kita perbaiki code yang kita buat menjadi seperti ini :

<a v-on:click.prevent="alert()" href="https://dumetschool.com">Dumet School</a>

Kita tambahkan yang namanya prevent, Setalah kita tambahakan maka link tersebut akan di prevent oleh vue js untuk melakukan tugas sesuai sifat bawaanya yaitu redirect.

Oke seperti itu lah teman-teman untuk Cara Menggunakan Events Modifier Pada Framework Vue Js dan sampai bertemu lagi pada artikel selanjutnya.

 

 

WhatsApp chat