CODEWITHSUNDEEP
javascripthtmlcssvue.js
T dhanunjay
T dhanunjay

Reputation: 820

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

.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.

Upvotes: 0

Views: 1051

Answers (1)

Victor Fernandes
Victor Fernandes

Reputation: 396

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/

Upvotes: 1

Related Questions