How to disable collapse v-b-toggle event on input? - vue.js

Question

So I have a v-b-toggle, that toggles other div. Everything works fine, but into the div, where v-b-toggle is, i have input-checkbox. The problem is, that if you click on this checkbox, toggle also works(open div and then close it instantly). Is there any possibility to disable toggle event on this particular input?
code:
<div class="box-header" v-b-toggle="$id(`collapse-${i}`)"><input type="checkbox"></div>

Answer 1

You can add #click.stop to your input, which will stop click events from propagating.
The stop modifier is a helper for stopPropagation
You can also read more about vue event modifiers on the vue docs.
new Vue({
el: '#app'
})
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="//cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>
<div id="app">
<div v-b-toggle.my-collapse>
Some text
<input type="checkbox" #click.stop/>
</div>
<b-collapse id="my-collapse">
Hello<br />
World
</b-collapse>
</div>