Javascript 组件根目录上的Vue 2事件侦听器

我试图捕获组件根节点上的事件，但以下操作不起作用。我不想只监听组件中的节点。我希望能够点击任何元素，然后点击backspace删除它。下面的代码是我如何设置代码的基本示例

<template>
   <div v-on:keydown.delete="delete()">
      <img id="image" src="..." v-on:click="set_active()">
   </div>
</template>
<script>
export default {
   return {
      data() {
          active: ''
      },
      methods: {
          delete(){
              delete this.$refs[this.active][0];
          },
          set_active() {
             this.active = event.target.getAttribute('id');
          }
      }
   }
}
</script>

---

在做了一些测试之后，我发现：

使用名为delete的方法将不起作用。我不知道为什么，这个问题仍然没有答案。例如，将其重命名为“删除”

在尝试捕获div上的键盘事件时，可能需要添加tabindex属性才能使其工作

交互式演示 Vue.组件“我的组件”{ 模板：“我的组件”， 资料{ 返回{ 图像：[ https://media.giphy.com/media/3ohs7KtxtOEsDwO3GU/giphy.gif, https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif, https://media.giphy.com/media/8L0xFP1XEEgwfzByQk/giphy.gif ], 活动：空 }; }, 方法：{ 激活{ this.active=i； }, 除去{ 如果此参数为.active！==null{ this.images=this.images.filter，i=>i！==this.active； this.active=null； } } } }; var vm=新的Vue{ el:“应用程序” }; div{ 大纲：无；/*避免tabindex导致的大纲*/ 边框：1px实心eee； } img{ 高度：80px； 边框：4px实心eee； 边缘：.5em； } img：悬停{ 边框：4px实心ffcda9； } img.active{ 边框：4px实心ff7c1f； }

---

然后尝试添加此。$refs.myImage。hide@ulou那不行：/哇，太棒了！作品谢谢为什么我需要tabindex=0？您会找到一些信息，特别是描述部分