Global key event in Vue

by mpsingh2003

HTML

<!--You may need to create a dedicated event listener, add it to window in mounted.-->
<div id="app">
  <p>{{message}}</p>
  <input
  type="text" 
  id="country"
  name="country"
  autocomplete="nope" 
  autocorrect="off" 
  autocapitalize="off" 
  spellcheck="false"
  v-on:keydown="incrementI"
  v-on:click.stop="incrementI"
  v-model.trim="a"
/>
</div>

JavaScript

var app = new Vue({
  el: "#app",
  data: {
    i: 1,
    a: 'tree'
  },
  computed: {
    message: function() {
      return "Hello world " + this.i;
    },
  },
  methods: {
    incrementI: function() {
      this.i++;
    },
    decrementI: function() {
      this.i--;
    }
  }
});