[Vuejs]-Vuejs keyup event trigger with keyCode and condition

by

0👍

Try this out and tell me if it worked.

<input type="text" v-on:keyup.186="{ (label == 'Tags') ? $event => onTagAdd($event, index) : {} }"    v-model="value">

0👍

maybe the inline style doesn’t support keycode in event type(not sure),try this out:

<input type="text" v-on:keyup.186="onTagAdd($event,2)"    v-model="value">

methods: {
        onTagAdd(event,index){
            // put your logic codes here
            console.info('==')
            console.info(event)
            console.info(index)
        }
    }

0👍

This page was helpful for me in Vue3: https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html

3.x Syntax#

Since KeyboardEvent.keyCode has been deprecated, it no longer makes sense for Vue 3 to continue supporting this as well. As a result, it is now recommended to use the kebab-case name for any key you want to use as a modifier.

<!-- Vue 3 Key Modifier on v-on -->
<input v-on:keyup.page-down="nextPage">

<!-- Matches both q and Q -->
<input v-on:keypress.q="quit">

As a result, this means that config.keyCodes is now also deprecated and will no longer be supported.

TLDR: in Vue 3 keycodes appear to be deprecated in favour of using kebab case.

For example, @keyup.186 would be @keyup.;

Leave a comment