Issue when trying to toggle the dropdown sub menu in Vuejs?

Question

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">HTML</a></li>
    <li><a tabindex="-1" href="#">CSS</a></li>
    <li class="dropdown-submenu">
      <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        <li class="dropdown-submenu">
          <a class="test" href="#">Another dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">3rd level dropdown</a></li>
            <li><a href="#">3rd level dropdown</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

This is my jsfiddle multi level sub menu dropdown https://jsfiddle.net/x4wshtqg/

How to add a method to open the sub menus in Vuejs, At present dropdown is showing only items in dropdown. But it is not showing the sub menu list in dropdown.

$(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); });

Above is the jquery code (method), But i need to write the above jquery to vuejs method. And need to display accordingly.

Victor Fernandes · Accepted Answer · 2021-05-29 17:51:41Z

1

You were missing setting the element to your vue instance. Once that's done, you can create a method and bind it to an event in your template. That method has access to jquery and the element via event.target and you can run it that way.

Here's an updated Fiddle doing the same: https://jsfiddle.net/gs4j6k30/2/

answered May 29, 2021 at 17:51

Victor Fernandes

3961 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue when trying to toggle the dropdown sub menu in Vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related