javascript - 在列表组 bootstrap vue js 中仅调用子按钮而不调用父按钮

Question

我的问题是如何单击子按钮(b-form-spinbutton)而不触发列表组项目？

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

当我单击旋转按钮时，有两个事件(将调用父级和子级)。我尝试了几乎所有的方法，比如阻止、停止等等。但这并没有帮助...

Answer 1

您可以尝试在 b-list-group-item 上使用 .self 修饰符，删除 div 并在徽章上调用相同的方法:

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>