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” …