Cara menggunakan V-ONCLICK pada JavaScript

HTML event adalah sesuatu yang terjadi pada sebuah DOM element. Ketika Vue.js digunakan pada HTML elemen, Vue.js bisa melakukan suatu aksi ketika terjadi sebuah event pada elemen ini. Proses inilah yang kita sebut dengan Event Handling pada Vue.js

Table of Contents Show

Handling Event Inline
Handling Event menggunakan Method
Shorcut v-on
Apa itu onclick pada JavaScript?
Apa itu View JS?
Apa itu V BIND Vue?
Kondisi event apa saja yang dapat diimplementasikan ke dalam JavaScript?

Event pada elemen HTML mewakili segala sesuatu dari interaksi pengguna, misalnya:

Sebuah halaman selesai di load
Sebuah button di klik
Sebuah form disubmit
dll

Inti dari Event Handling adalah kita dapat melakukan sesuatu pada saat sebuah event terjadi. Pada Vue.js untuk me-listen event DOM kita dapat menggunakan directive v-on dengan format v-on:event. Misalnya kita akan melakukan sesuatu saat event click terjadi pada sebuah button, pada elemen input tersebut kita bisa menggunakan v-on:click.

Sekarang mari kita mencoba membuat sebuah contoh sederhana untuk mendemonstrasikan penanganan event pada Vue.js. Misalnya, kita memiliki sebuah button dan pada saat button tersebut di klik, kita harus menghitung berapa jumlah klik yang sudah terjadi pada button tersebut.

Handling Event Inline

Cara pertama, kita bisa menangani event secara inline dengan menambahkan counter pada suatu variable Vue.js ketika button di klik.

<html>
    <head>
        <title>Vue.js Event Handling</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    </head>
    <body>
        <div id="app">
            <div class="container mt-5">
                <button class="btn btn-primary" v-on:click="upvotes++">
                    Upvote! {{upvotes}}
                </button>
            </div>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                upvotes: 0
            }
        })
    </script>
</html>

Bila kita lihat pada contoh kode diatas, kita memiliki sebuah variable dengan nama upvotes, kemudian kita melakukan sebuah aksi pada saat event di klik dengan menggunakan directive v-on:click. Pada saat button di klik kita akan menambahkan jumlah klik pada variable upvotes (upvotes++)

Handling Event menggunakan Method

Kita juga bisa menggunakan sebuah method untuk melakukan sesuatu pada saat terjadi event, pada contoh ini kita akan melakukan hal yang sama pada contoh diatas, tetapi menggunakan method.

<html>
    <head>
        <title>Vue.js Event Handling</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    </head>
    <body>
        <div id="app">
            <div class="container mt-5">
                <button class="btn btn-primary" v-on:click="upvote">
                    Upvote! {{upvotes}}
                </button>
            </div>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                upvotes: 0
            },
            methods: {
                upvote: function () {
                    this.upvotes++;
                }
            }
        })
    </script>
</html>

Pada kode diatas, kita akan memanggil method upvote pada saat button di klik, hasilnya akan sama persis dengan contoh sebelumnya. Hanya saja, menurut saya menggunakan method untuk handling event kode kita terlihat lebih rapih.

Shorcut v-on

Vue.js juga menyediakan sebuah shortcut untuk mempersingkat penggunaan v-on untuk event handling. Kita bisa menggunakan symbol @ untuk handling event, pada dasarnya symbol @ ini hanya menggantikan directive v-on, tidak ada fungsi khusus pada symbol ini.

<button v-on:click="upvote">
    Upvote! {{upvotes}}
</button>

<button @click="upvote">
    Upvote! {{upvotes}}
</button>

Masih banyak event lainnya yang bisa kita gunakan seperti onchange, onmouseover, onsubmit, dll. Berikut ini adalah referensi daftar event yang biasanya digunakan pada sebuah aplikasi.

HTML Event Attributes – javatpoint

HTML Event Attributes with html tutorial, tags, anchor, img, div, entity, textarea, marquee, p tag, heading tag, h2, h2, table, formatting, attribute, elements, ol, ul, Input Types, block element tag, inline element tag, html tags, phrase tag, head, body, form, lists, symbols etc.

Pada tutorial kali ini kita hanya menggunakan event click untuk mendemonstrasikan bagaimana Event Handling pada Vue.js. Kita tidak akan membahas semua event yang ada pada tutorial kali ini, akan tetapi pada dasarnya penanganan event pada setiap event pada HTML menggunakan cara yang sama.

Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S

Apa itu onclick pada JavaScript?

onclick adalah atribut HTML untuk menentukan aksi saat event klik pada sebuah elemen. Atribut ini bisa diisi dengan nama fungsi atau ekspresi javascript. Selain event onclick ada juga event lainnya seperti onchange , onmouseover , onkeyup , onload , dll.

Apa itu View JS?

Apa itu Vue JS? Vue JS adalah salah satu framework atau library dari JavaScript yang digunakan untuk untuk membuat tampilan (interface) pada website agar tampak lebih interaktif. Fungsi lain dari Vue JS adalah membuat SPA (Single Page Application).

Apa itu V BIND Vue?

v-bind adalah Vue directive yang digunakan untuk meng-kaitkan (binding) atribut tag HTML dengan expression dan di saat bersamaan meneruskan data (property di dalam objek Javascript) ke expression yang memiliki nama sama.