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修饰符。

每docs (Event Handling/Event Modifiers/.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>

请参阅下面的更改代码。

＆＃13;

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

＆＃13;

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="app">

  <div v-for="row in rows">
     <a href="#" 
       class="btn btn-xs btn-bricky tooltips" 
       :data-id="row.id" 
       data-placement="top"
       data-original-title="Remove" 
       @click.stop="removeRow($event)">
         <i class="fa fa-times fa fa-white"></i> {{ row.name }}
     </a>
  </div>
 
</div>

＆＃13;

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

在JS部分中，我创建了一个rows来测试，并添加了console.log($event.currentTarget.dataset.id)来展示如何获取id。

Answer 2

然后，您不需要在stop上使用self传播或呼叫功能：

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

prevent用于阻止默认链接操作。

您可以使用currentTarget代替target来标识附加元素并从中获取href值。

$event.currentTarget.href

或者，为什么不在params中设置值：

@click.prevent="removeRow('your-value')"

在你的方法中：

removeRow(myvalue) {
  // do whatever you want to do with myvalue
}

Answer 3

您可以使用以下示例来使其正常工作。运行代码并单击三个文本，但只能获得子和父div的data-id值

＆＃13;

new Vue({
 el: '#app',
 methods: {
  init($event){
   let el = $event.target.nodeName
   var id = null; 
   
   if(el == 'A'){
    id = $event.target.dataset.id
   }
   
   if(el == 'I'){
   	id = $event.target.parentElement.dataset.id
   }
  
   console.log( ' id', id)
  }
 }
})

＆＃13;

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<div id="app">
  
<a href="#" @click='init' data-id='42'> Inside A <br/>
  <i>Inside I</i>
</a>
  
</div>

＆＃13;

Answer 4

解决方法很简单。使用@click.stop

@click.stop(openUser(user))

阻止孩子从@click vue.js

4 个答案: