Use vueJs instead of jquery

Question

I'm wonder, is there a way replace with VueJs following jquery code which just show/hide nested navigation:

<nav class="nav nav-navbar">
<div class="parent"><a class="nav-link active" href="#">Home</a></div>
<div class="nested hide">
    <a class="nav-link"  href="#">Product 1</a>
    <nav class="submenu hide">
        <a href="#">Sub menu 1</a>
        <a href="#">Sub menu 2</a>
    </nav>

</div>
<div class="nested hide">
    <a class="nav-link"  href="#">Product 2</a>
    <nav class="submenu hide">
        <a href="#">Sub menu 1</a>
        <a href="#">Sub menu 2</a>
    </nav>

</div>
<div><a class="nav-link" href="#">Free</a></div>
</nav>

<script>
   $("nav . parent").click((e)=>{
       $(this).next().toogleClass("hide");
   })
</script>

P.S: I have good experience with reactJs and suppose that if generate html with vueJs this task can be resolve very easy, but i'm intrested - can we use VueJs like we use jquery.

Sovalina · Accepted Answer · 2018-06-18 08:49:16Z

You can use Class and Style Binding with VueJS to toggle a css class on click.

If you have multiple menus/submenus to toggle, you can pass an object in your data instead of a simple boolean hide: true/false.
Then in the showMenu action you can do whatever you need (simple toggle, add some condition based on the menu name etc...)

new Vue({
  el: "#app",
  data: {
    hide: { product: true, submenu: true }
  },
  methods: {
    showMenu(menu) {
      this.hide[menu] = !this.hide[menu]
    }
  }
})

.hide {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <nav class="nav nav-navbar">
    <div class="parent" @click="showMenu('product')"><a class="nav-link active" href="#">Home</a></div>
    <div class="nested" :class="{ 'hide': hide.product }">
      <a class="nav-link" href="#" @click="showMenu('submenu')">Product</a>
      <nav class="submenu" :class="{ 'hide': hide.submenu }">
        <a href="#">Sub menu 1</a>
        <a href="#">Sub menu 2</a>
      </nav>
    </div>
    <div><a class="nav-link" href="#">Free</a></div>
  </nav>
</div>

but how we can handle multiple nested menu(updated question), looks like we have to create multiple hide variable for each menu or do you know other way?
@comalex3 i updated my anwser based on your first question but the solution is the same for any menu/submenu you want. With an object you can add any menu name true/false and use the same method to toggle it.

Collectives™ on Stack Overflow

Use vueJs instead of jquery

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related