Catatan Belajar Vue : Event & Method

Saat halaman di-load itu merupakan event, saat tombol diklik itu merupakan event, intinya interaksi antara HTML ( DOM ) dengan javascript itu biasa disebut Event. Penggunaan event di Vue itu cukup mudah, pada Vue bisa menggunakan directive v-on, lalu diikuti oleh eventyang akan digunakan. Bisa dilihat pada contoh script tulisan sebelumnya

<input type="text" v-on:input="cssClass = $event.target.value">

Pada contoh di atas saya menggunakan event input. Pada tulisan kali ini saya coba dulu yang paling sederhana yaitu klik. Pertama siapkan struktur html yang baru.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event & Method</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <button>
        Klik
      </button>
      <br>
      
            Jumlah : {{ countClick }}
        
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        countClick: 1
      }
     })
  </script>
</html>

Rencananya setiap ngeklik tombol tersebut jumlah klik akan bertambah, caranya cukup mudah tambahkan directive v-on pada < button > sehingga hasilnya akan seperti berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event & Method</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <button v-on:click="countClick = countClick + 1">
        Klik
      </button>
      <br>
      
      
            Jumlah : {{ countClick }}
        
      
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        countClick: 1
      }
     })
  </script>
</html>

Hasilnya akan seperti ini

Silahkan kunjungi dokumentasi Vue untuk mengetahui sejumlah event yang bisa dikombinasikan dengan directive v-on.

Selanjutnya adalah method. Pada contoh di atas saya menggunakan hal yang sederhana, sekadar nambah 1 klik setiap kali event dilakukan, tapi jika nanti ternyata harus ada proses lainnya yang lebih njelimet tentu memaksakan langsung di dalam v-on bukanlah hal yang tepat, saat itulah method digunakan. Penggunaan method pada Vue berarti pada instance Vue perlu ditambahkan properti methods seperti ini.

<script>
   new Vue({
      el: '#app',
      data: {
        countClick: 1
      },
      methods: {
        methodName() {
        	//masukan proses di sini
        }
      }
     })
  </script>

Anggap saja sekarang dengan fungsi yang barusan saya mau jika jumlah klik genap maka background berwarna biru dan ganjil berwarna merah.

!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event & Method</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <style>
      .red {
        background-color: red;
      }
      .blue {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button v-on:click="changeBackground">
        Klik
      </button>
      <br>
        <div v-bind:class="cssClass" style="width:250px;">
        
            Jumlah : {{ countClick }}
        
        </div>
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        cssClass: "",
        countClick: 0
      },
      methods: {
        changeBackground() {
          //masukan proses di sini
          var count = this.countClick + 1;
          this.countClick = count;
          if(count % 2 == 0)
          {
            this.cssClass = "blue";
          }else{
            this.cssClass = "red";
          }
        }
      }
     })
  </script>
</html>

Ada yang berbeda dari isi directive v-on, jika yang sebelumnya langsung menarget properti di dalam data, sekarang target di dalam v-on spesifik ke method.

Referensi :

https://www.tutorialspoint.com/javascript/javascript_events.htm

https://vuejs.org/v2/guide/events.html#Listening-to-Events

https://vuejs.org/v2/guide/events.html#Method-Event-Handlers