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:[
‘liane Radigue’,
‘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();
}
});
},
});

[1] https://getbootstrap.com/docs/4.3/components/dropdowns/

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

<div class=”dropdown-menu” @click.stop=””>

Here’s the working jsfiddle