[Vuejs]-Vuetify v-data-table row click event with modifiers

by

0👍

✅

I solved my problem with a global key eventlistener in my component. I found an example here:
https://codepen.io/ryancwynar/pen/jOWoXZw

My code:
I set this.registerKeyHandler(true/false) in created() and beforeDestroy()

registerKeyHandler(register) {
    if (register) {
        window.addEventListener('keydown', this.keyHandler)
        window.addEventListener('keyup', this.keyHandler)
    } else {
        window.removeEventListener('keydown', this.keyHandler)
        window.removeEventListener('keyup', this.keyHandler)
    }
},
keyHandler(event) {
    if (!event.key === 'Control' && !event.key === 'Shift') return false
    if (event.key === 'Control' && event.type === 'keydown') {
        this.ctrlKeyOn = true
    } else if (event.key === 'Control' && event.type === 'keyup') {
        this.ctrlKeyOn = false
    } else if (event.key === 'Shift' && event.type === 'keydown') {
        this.shiftKeyOn = true
    } else if (event.key === 'Shift' && event.type === 'keyup') {
        this.shiftKeyOn = false
    }
},

Leave a comment