Прослушиватель событий Vue 2 в корне компонента

Question

Я пытаюсь перехватить событие на корневом узле компонента, но следующее не работает.Я не хочу просто слушать узел в компоненте.Я хочу иметь возможность щелкнуть по любому элементу, а затем нажать 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>

Answer 1

После выполнения некоторых тестов, вот что я обнаружил:

1. Наличие метода с именем delete не будет работать.Я не знаю почему, вопрос остается без ответа здесь .Переименуйте его, например, в remove.

2. При попытке перехватить события клавиатуры в div, вам может потребоваться добавить атрибут tabindex, чтобы он работал.( См. Здесь )

Интерактивная демонстрация

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      images: [
        "https://media.giphy.com/media/3ohs7KtxtOEsDwO3GU/giphy.gif",
        "https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif",
        "https://media.giphy.com/media/8L0xFP1XEEgwfzByQk/giphy.gif"
      ],
      active: null
    };
  },
  methods: {
    set_active(i) {
      this.active = i;
    },
    remove() {
      if (this.active !== null) {
        this.images = this.images.filter((_, i) => i !== this.active);
        this.active = null;
      }
    }
  }
});

var vm = new Vue({
  el: '#app'
});

div {
  outline: none; /* Avoid the outline caused by tabindex */
  border: 1px solid #eee;
}

img {
  height: 80px;
  border: 4px solid #eee;
  margin: .5em;
}

img:hover {
  border: 4px solid #ffcda9;
}

img.active {
  border: 4px solid #ff7c1f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <div @keydown.delete="remove" tabindex="0">
    <img
      v-for="(img, i) in images"
      :key="i"
      :src="img"
      :class="{ active: active === i }"
      @click="set_active(i)"
    />
  </div>
</template>