VueJS - How to detect Ctrl+V?

Question

I've already seen the answers to this question, but it's not the solution I need, since it's for jQuery, and I need something for vue.js.

So far, I was able to detect single character presses using the ff. code:

export default {
  name: 'game',

  data () {
    return {
      allowInput: false,
      disabledKeys: ['ArrowLeft', 'Home', 'Control']
    }
  },

  methods: {
    keymonitor: function (event) {
      console.log(event.key)
      
      if (this.disabledKeys.indexOf(event.key) >= 0) {
        event.preventDefault()
        this.allowInput = false
        // alert('not allowed')
      } else {
        this.allowInput = true
      }
    },

    checkAnswer () {
      if (! this.allowInput) {
        alert('the key(s) you pressed is/are not allowed')
      }
    } /* END checkAnswer */
  } /* END methods */
} /* END export default */

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>

<input id="typeBox" ref="typeBox" autocomplete="off" placeholder="Type here..."
       @keydown="keymonitor" @keyup="checkAnswer()" />

The code above successfully prevents the textbox from accepting ArrowLeft, Home, and Control key presses.

The problem:

I'm trying to figure out how to detect Ctrl+V, because I want to prevent paste action in my text box. Does anyone know how to do this? Thanks in advance.

Answer 1

To detect two keys, Vue provides modifier keys, For example to detect Alt+C, you can simply do:

<input @keyup.alt.67="YourFn">

Similarly for Ctrl+V, you can do:

<input @keyup.ctrl.76="YourFn">

As I can see here, ASCII code for Ctrl+v is 22, so you should be simply able to do :

<input @keyup.22="YourFn">

Answer 2

you can check the js fiddle link for the same

keyup: function(event){
    if(event.keyCode == 86 && event.ctrlKey){
    // do something here
  }
}

https://jsfiddle.net/neelkansara28/wh61rby8/16/