# [Vue.js] Checkboxes in Bootstrap 4 Dropdown (opened with vue.js) not checkable Subscribe to RSS

I open a Bootstrap Dropdown[1] with Vue.js. The Dropdown contains some custom checkboxes that I’m not able to select.

I read about event.stopPropagation() and how this could be the culprit, but I couldn’t figure out where to place it.
How can I make this work?[2]

here is a jsfiddle https://jsfiddle.net/b7yskLw6/6/

Here is the minimal HTML:

<div class=”dropdown”>
<button class=”dropdown-toggle” @click=”toggleDropdown($event)” type=”button” id=”dropdownMenuButton” data-toggle=”dropdown”> Composers </button> <div class=”dropdown-menu”> <ul> <li v-for=”composer in composers”> <div class=”custom-control custom-checkbox”> <input @change=”assignComposer($event)” type=”checkbox” class=”custom-control-input” :id=”composer”>
<label class=”custom-control-label” :for=”composer”>{composer}</label>
</div>
</li>
</ul>
</div>
</div>

And the JS:

var app = new Vue({
el: ‘#app’,
data: {

composers:[
‘Laurie Spiegel’,
‘Maryanne Amacher’
]

},
methods: {
toggleDropdown: function(event){
$(event.target.parentElement).dropdown(‘toggle’); }, assignComposer: function(event){ console.log(event) } }, created: function(){ // closing the dropdown from outside…. var self = this; window.addEventListener(‘click’, function (e) { if (!$(e.target).parents(‘.dropdown’).length)
{
\$(‘.dropdown’).dropdown(‘hide’);
}else{
e.stopPropagation();
}
});
},
});

[2] I know, jQuery+vue.js is bad, but that’s what I got and at the end it’s all “just” javascript…

### Solution :

In this case the event.stopPropagation() should be used on the dropdown click event.

Using the Vuejs event modifiers you can just edit the code in this way: