Calling only children button not parent in a list-group bootstrap vue js

Question

My question is how can I click on children button (b-form-spinbutton) without trigger on the list group item?

<b-list-group class="slots-list pr-2" >
  <b-list-group-item v-for="slot in this.selectedDayData" :key="slot.id" 
    v-on:click="onSlotClick(slot,$event)" >
    <div class="d-flex">
      <div>
        <b-badge variant="info" pill>
          {{slot.meal}}
        </b-badge>
      </div>
    </div>
    <div id ="spinButtonDiv" ref="spinbutton">
      <b-form-spinbutton @input="test(slot,$event)"  inline>
      </b-form-spinbutton>
    </div>
  </b-list-group-item>
</b-list-group> 

When I click on the spin button two events (the parent and the children will be called). I tried mostly everything like prevent, stop and so on. But it did not help...

Answer 1

You can try with .self modifier on b-list-group-item, remove divs and call the same method on badge:

new Vue({
  el: "#demo",
  data() {
    return {
      selectedDayData: [{id: 1, meal: "aa"}, {id: 2, meal: "bb"}, {id: 3, meal: "cc"}]
    }
  },
  methods: {
    test(a) {
      console.log('b-form-spinbutton')
    },
    onSlotClick(b) {
      console.log('b-list-group-item')
    }
  }
})

.badge {
  color: black !important;
}
.click {
  cursor: pointer; 
  display: grid !important;
  justify-items: start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
  <b-list-group class="slots-list pr-2" >
    <b-list-group-item v-for="slot in selectedDayData" :key="slot.id" @click.self="onSlotClick(slot)" class="click">
      <b-badge @click="onSlotClick(slot)" variant="info" pill>{{ slot.meal }}</b-badge>
      <b-form-spinbutton @input="test(slot)" inline></b-form-spinbutton>
    </b-list-group-item>
  </b-list-group> 
</div>