Hello everyone! I'm a newcomer to the world of Vue. Recently, I encountered an issue with keyboard-event binding that has left me puzzled. Let me share the relevant code snippet 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...
In this scenario, my goal is to attach two keyboard event listeners to the <component> element. Unfortunately, neither approach seems to be working as expected. Since the <component> is a custom component, the native attribute is required. Deleting the native attribute did not solve the problem. Additionally, attempting to add global keyboard event listeners within the mounted or created lifecycle had its own set of limitations. While these methods were able to trigger the associated functions, passing the parameter item to pasteComponent proved to be a challenge. If anyone has any suggestions or insights on how to successfully address this issue, I would greatly appreciate it. Thank you in advance!