Search code examples
vue.jsbootstrap-4dropdown

Why are multiple bootstrap dropdown menus on the same vue component sharing the same options?

I have two dropdown menus in the same Vue.js component. For some reason, the options in the second dropdown don't appear. Instead, the second dropdown displays the same options as the first dropdown. WHy is this?

enter image description here

enter image description here

    <div class="d-flex">
      <div data-toggle="dropdown">
        <a href="#" class="btn btn-secondary ml-4_5">
          Dropdown1
          <i class="fal fa-angle-down"></i
        ></a>
        <ul class="dropdown-menu dropdown-menu-arrow">
          <li>

              Option A
            </li>
            <li> Option B
          </li>
        </ul>
      </div>               
      <div data-toggle="dropdown">
        <a href="#" class="btn btn-secondary ml-4_5">
        Dropdown2
          <i class="fal fa-angle-down"></i
        ></a>
        <ul class="dropdown-menu dropdown-menu-arrow">
          <li>
              Option 1</li>
            <li>Option 2
          </li>
        </ul>
      </div>  
     </div>
Solution

  • data-toggle should be an attribute of the tag which will toggle the dropdown menu. Move the attribute to the anchor tag and it will work fine.