Vue.js dropdown nested menu (keep parent open when child active)
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
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.