Question

我正在尝试捕获组件根节点上的事件，但是以下操作无效。我不想只听组件中的一个节点。我希望能够单击任何元素，然后按退格键将其删除。下面的代码是如何设置代码的基本示例。

<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

经过一些测试，这是我发现的：

拥有名为delete的方法将不起作用。我不知道为什么，这个问题仍然没有得到解答here。例如，将其重命名为remove。
尝试捕获div上的键盘事件时，可能需要添加tabindex属性以使其起作用。（See here）

互动演示

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>

组件根上的Vue 2事件侦听器

1 个答案:

互动演示