link2603 link2604 link2605 link2606 link2607 link2608 link2609 link2610 link2611 link2612 link2613 link2614 link2615 link2616 link2617 link2618 link2619 link2620 link2621 link2622 link2623 link2624 link2625 link2626 link2627 link2628 link2629 link2630 link2631 link2632 link2633 link2634 link2635 link2636 link2637 link2638 link2639 link2640 link2641 link2642 link2643 link2644 link2645 link2646 link2647 link2648 link2649 link2650 link2651 link2652 link2653 link2654 link2655 link2656 link2657 link2658 link2659 link2660 link2661 link2662 link2663 link2664 link2665 link2666 link2667 link2668 link2669 link2670 link2671 link2672 link2673 link2674 link2675 link2676 link2677 link2678 link2679 link2680 link2681 link2682 link2683 link2684 link2685 link2686 link2687 link2688 link2689 link2690 link2691 link2692 link2693 link2694 link2695 link2696 link2697 link2698 link2699 link2700 link2701 link2702 link2703 link2704 link2705 link2706 link2707 link2708 link2709 link2710 link2711 link2712 link2713 link2714 link2715 link2716 link2717 link2718 link2719 link2720 link2721 link2722 link2723 link2724 link2725 link2726 link2727 link2728 link2729 link2730 link2731 link2732 link2733 link2734 link2735 link2736 link2737 link2738 link2739

[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

Here is the minimal HTML:

<div class=”dropdown”>
<button class=”dropdown-toggle” @click=”toggleDropdown($event)” type=”button” id=”dropdownMenuButton” data-toggle=”dropdown”>
<div class=”dropdown-menu”>
<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>

And the JS:

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

‘liane Radigue’,
‘Laurie Spiegel’,
‘Maryanne Amacher’

methods: {
toggleDropdown: function(event){
assignComposer: function(event){
created: function(){
// closing the dropdown from outside….
var self = this;
window.addEventListener(‘click’, function (e)

if (!$(‘.dropdown’).length)


[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