Vue Event Handling

by Ardani Rohman

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
<button v-on:click="showAlert()">Show Alert</button>
<button v-on:click="increase()">Increase (+)</button>
<button v-on:click="decrease()">Decrease (-)</button>
<p>Counter {{counter}}</p>
<hr/>
<input type="text" v-on:change="change()" placeholder="on change"/>
<input type="text" v-on:keyup="change($event)" placeholder="on keyup"/>
<p>Alias key</p>
<ul>
<li><code>.enter</code></li>
<li><code>.tab</code></li>
<li><code>.delete</code> (captures both “Delete” and “Backspace” keys)</li>
<li><code>.esc</code></li>
<li><code>.space</code></li>
<li><code>.up</code></li>
<li><code>.down</code></li>
<li><code>.left</code></li>
<li><code>.right</code></li>
</ul>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    isShow: true,
    counter: 0
  },
  methods: {
    showAlert: function() {
      alert('hello alert');
    },
    increase: function() {
      this.counter +=1
    },
    decrease: function() {
      this.counter -=1
    },
    change: function(event) {
       console.log("trigger change",event.code);
    }
  }
})