div keyevent

key event of div in vuejs

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">

  <div class="container">
    <div class="box"
      @keyup="keyEvent"
      :style="boxStyle"
    >
  
    </div>
  </div>
</div>

CSS

.container {
  width:95vh;
  height:95vh;
  position:relative;
}
.box {
  width:50px;
  height:50px;
  background-color:yellow;
  position:absolute;
}

JavaScript

new Vue({
	el: '#app',
  data: function() {
  	return {
			boxStyle: {
				top: 0,
	      left: 0
      }
    }
  },
  created: function() {
		window.addEventListener('keyup', this.keyEvent, true)
  },
  beforeDestroy: function() {
		window.removeEventListener('keyup', this.keyEvent, true)
  },
  methods: {
	  keyEvent: function(e) {

			var key = ''
      var t = 1
			switch(e.key) {
      	case 'ArrowUp':
        	key = 'top'
          t = -1
        	break
        case 'ArrowDown':
        	key = 'top'
	        break
        case 'ArrowLeft':
        	key = 'left'
          t = -1
        	break
        case 'ArrowRight':
        	key = 'left'
        	break
        default:
        	return
      }
			var movement = parseInt(this.boxStyle[key]) + 10 * t;
			this.boxStyle[key] = movement + 'px';

    }
  }
})