0
183
VistasCalling only children button not parent in a list-group bootstrap vue js
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...
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta