0
171
ViewsLlamar solo al botón de niños, no a los padres en un grupo de lista bootstrap vue js
Mi pregunta es ¿cómo puedo hacer clic en el botón de niños (b-form-spinbutton) sin desencadenar en el elemento del grupo de lista?
<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>Cuando hago clic en el botón giratorio, dos eventos (se llamarán el padre y los hijos). Intenté casi todo, como prevenir, detener, etc. Pero no ayudó...
·
Juan Pablo Isaza
1 answers
Answer question0
Puede probar con el modificador .self en b-list-group-item , eliminar divs y llamar al mismo método en 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
Report
Answer question