Checkboxes in Bootstrap 4 Dropdown (opened with vue.js) not checkable

Question

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 is bad, but that's what I got and at the end it's all "just" javascript...

Answer 1

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

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

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

Here's the working jsfiddle