Vue.js Dropdown Nested Menu (keep Parent Open When Child Active)

I'm starting my journey with Vue.js, and stumbled upon some problem. I wanted to create a simple sidebar with dropdown menu, and already got this: My problem here is that when I

Solution 1:

You need to add a @click.stop on your nested elements to stop the event propagation:

<router-link :to="child.path" @click.stop>
   {{child.text}}
</router-link>

Here is the updated JSFiddle: https://jsfiddle.net/myeh0mvo/23/

You can learn more about event modifiers on this page of the documentation: https://vuejs.org/v2/guide/events.html#Event-Modifiers

Solution 2:

I was looking for exactly this, so thank you. However, I found that for me, I needed to add @click.stop.prevent to the nested elements.

Not sure why, but it was a random try and it keeps the menu open when the child element is clicked.