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