CODEWITHSUNDEEP
vue.jsconfigvuejs2
KHW1031
KHW1031

Reputation: 136

Can't use camelCase property name when define and use Vue.config.keyCodes

Can't use camelCase property name when define and use Vue.config.keyCodes

I am trying to config keyCodes on keyup event Using v-on by Vue.js.
I read the documentation and found Vue.config.keyCodes = {} which is static method user can set custom names to keyCodes.

Problem 1 : camelCase property name seems not working.

below is JSFiddle without camelCase and it works well.

Link : without camelCase config

below is JSFiddle with camelCase and it does not work.

Link : with camelCase config

There is example using camelCase in Vue.js documentation.
I think camelCase should work too. why it is not working??

Problem 2 : binding multiple keyCodes

I want to make my input to Alert when I type cmd + enter.
I tried @keyup.91.13, @keyup.91&&13, or keyCode config like

Vue.config.keyCodes = {
    hit: 91&&13
}

but it does not work. How can I make this work properly??

Upvotes: 3

Views: 1359

Answers (3)

Bill Criswell
Bill Criswell

Reputation: 32921

Problem 1:

I believe that's just by design. I thought .call-alert might work instead but it does not. I'm thinking modifiers are limited to all lowercase characters.

Problem 2:

Since command is a modifier key you can do:

@keyup.ctrl.enter="dance"

You can find more details on that here: https://v2.vuejs.org/v2/guide/events.html#Modifier-Keys

Upvotes: 1

Cedrus
Cedrus

Reputation: 29

Problem 1:

As Vue doc, you should use use kebab-case with double quotation marks. https://v2.vuejs.org/v2/api/#keyCodes

Vue.config.keyCodes = {
  v: 86,
  f1: 112,

  // camelCase won`t work
  mediaPlayPause: 179,
  // instead you can use kebab-case with double quotation marks
  "media-play-pause": 179,

  up: [38, 87]
}

Upvotes: 0

Happyriri
Happyriri

Reputation: 4443

Problem 2 : binding multiple keyCodes

Better to use ".meta" because "keyup = 91" don't works for Opera (its "keyup=219" and not 91).

@keyup.meta.enter="yourMethod"

(But I don't know why this don't works for me on Ubuntu)

Note: On Macintosh keyboards, meta is the command key (⌘). On Windows keyboards, meta is the windows key (⊞). On Sun Microsystems keyboards, meta is marked as a solid diamond (◆). On certain keyboards, specifically MIT and Lisp machine keyboards and successors, such as the Knight keyboard, space-cadet keyboard, meta is labeled “META”. On Symbolics keyboards, meta is labeled “META” or “Meta”.

Upvotes: 1

Related Questions