防止孩子从@click vue.js

Question

我有这种情况：

<a href="#" 
  class="btn btn-xs btn-bricky tooltips" 
  :data-id="row.id" 
  data-placement="top"
  data-original-title="Remove" 
  @click.self.stop="removeRow($event)">
       <i class="fa fa-times fa fa-white"></i>
</a>

现在，当我点击链接时，它没问题，但是如果我点击<i>（在 里面<a>），没有任何反应（因为@click.self.stop）。

我想要实现的是触发相同的方法，在这种情况下removeRow()，无论我点击<a>还是<i>被点击。我需要获取data-id属性形式ahref。

Answer 1

我想要实现的是触发相同的方法，在这种情况下是 removeRaw，无论我是点击<a>还是<i>被点击。

从你所说的来看，你实际上只需要删除.self修饰符。

每个文档（事件处理/事件修饰符/ .self）：

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

请参阅下面的更改代码。

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

new Vue({
  el: '#app',
  data: {
    rows: [{id: 1, name: "row1"}, {id: 2, name: "row2"}]
  },
  methods: {
    removeRow($event) {
      console.log($event.currentTarget.dataset.id)
    }
  }
})

模板中的唯一修改位是@click.self.stop="removeRow($event)" 到@click.stop="removeRow($event)"。

在 JS 部分，我创建了一个rowsjust to test，并添加了console.log($event.currentTarget.dataset.id)以展示如何获取id.