У меня такая ситуация:

<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.

2
Branko Dragovic 27 Фев 2018 в 18:23

3 ответа

Лучший ответ

Чего я хотел бы добиться, так это запускать один и тот же метод, в данном случае 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>

Смотрите измененный код ниже.

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

Единственный измененный бит в шаблоне был @click.self.stop="removeRow($event)" в @click.stop="removeRow($event)".

В части JS я создал rows просто для тестирования и добавил console.log($event.currentTarget.dataset.id), чтобы показать, как получить id.

4
acdcjunior 27 Фев 2018 в 15:48

Тогда вам не нужно использовать 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 вместо {{X0} } чтобы идентифицировать прикрепленный элемент и получить оттуда значение href.

$event.currentTarget.href

В качестве альтернативы, почему бы просто не установить значение в params:

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

В вашем методе:

removeRow(myvalue) {
  // do whatever you want to do with myvalue
}
1
Bhojendra Rauniyar 27 Фев 2018 в 15:55

Вы можете использовать следующий пример, чтобы заставить его работать. Запустите код и нажмите на три текста, но вы получите только значение data-id дочернего и родительского div

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)
  }
 }
})
<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>
0
samayo 27 Фев 2018 в 15:49