widgets Listening Key Events on VueJs

Listening events with v-on. For listening to all key-up events vuejs using v-on:keyup. Here is an example, read the input value and write output at the same time:

<div id="exercise">
    <div>
        <input type="text" v-on:keyup="storeData" v-bind:data-stored="storedValue">
        <p>{{ storedValue }}</p>
</div>

new Vue({
	el: "#exercise",
  data: {
  	storedValue : "",
  },
  methods: {
    storeData: function (event) {
    	this.storedValue = event.target.value;
    },
  }
})

Lets make it if user click enter:

...
<input type="text" v-on:keyup.enter="storeDataEntered" v-bind:data-stored="storedEnteredValue">
<p>{{ storedEnteredValue }}</p>
...

new Vue({
	el: "#exercise",
  data: {
  	storedEnteredValue : "",
  },
  methods: {
    storeDataEntered: function (event) {
    	this.storedEnteredValue = event.target.value;
    },
  }
})

The most important key codes: “enter“, “tab“, “delete“, “esc“, “space“, “up“, “down“, “left“, “right” …