all! I'm new to Vue. Here, I met a question with keyboard-event binding problem. The related codes showed below:
...other code...
<template v-for="(item, index) in chartDataList">
<component
ref="chartSelfRef"
:is="item.componentShowName"
:key="item.id"
:showData="item"
v-show="item.show"
:activeElement="activeElement"
@keydown.ctrl.67.native="keyboardPaste(item)"
@keyup.ctrl.86.native="pasteComponent"
@click.native="closeContextmenu"
@contextmenu.prevent.native="openContextmenu($event, item)"
@mousedown.native.stop="configChart(index)"
@getRefLineParams="getRefLineParams"
@delSingleText="delSingleText"
>
</component>
</template>
...other code...
Here I wanna add two keyboard event-listeners on <component>; however, they all doesn't work. As the <component> is a custom component, so the native attribute is required (I've tried to delete the native attribute, cannot work either); I also tried to use add global keyboard event-listener in mounted or created lifecycle, the good thing is the related methods can be triggered, but, by using this approach, I cannot pass the parameter item to the function pasteComponent, so this approach is also not work for me. So, could anyone provide me any suggestions? Thanks in advance!
You can always use it like this on vue element
@keyup.native="keyFunction($event,item)"
And in function
keyFunction(event,item) {
if(event.keyCode === 67){
this.keyboardPaste(item);
}
else if(event.keyCode === 86){
this.pasteComponent();
}
},
This is what works for me in vue 2.6 . Sorry if my answer is not detailed.