Vuejs - Handle key press and Click on table row

Question

How I can capture key press and click on a tr element ?

I need to implement a table that can handle a single row selection, or multiple-row selection.

Right now, I tried to bind the key ctrl:

Vue.directive('on').keyCodes.ctrl = 17;

But, if i use @keyup.ctrl sure this dont works, because I need to check what key is pressed when the user click on a row.

Roy J · Accepted Answer · 2016-09-01 15:39:47Z

3

The click event includes properties that indicate whether Control, Shift, Alt, or Meta keys were pressed during the click.

new Vue({
  el: 'body',
  data: {
    controlled: false,
    shifted: false,
    meta: false,
    alted: false
  },
  methods: {
    clicked: function(event) {
      console.debug(event);
      this.controlled = event.ctrlKey;
      this.shifted = event.shiftKey;
      this.meta = event.metaKey;
      this.alted = event.altKey;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<button @click="clicked">Click me!</button>
<div v-if="controlled">Control was pressed</div>
<div v-if="shifted">Shift was pressed</div>
<div v-if="alted">Alt was pressed</div>
<div v-if="meta">Meta was pressed</div>

answered Sep 1, 2016 at 15:39

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs - Handle key press and Click on table row

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related