Two context menus

[RicardoRamirezR]

Hi there, starting to try you component, and it works very well only if is one menu on the page since you have the ul id hardcoded. is there any way to have more than one menu? thank you!

[RicardoRamirezR]

Maybe:

<ul :id="id" class="vue-simple-context-menu" v-click-outside="onClickOutside">
    <li v-for="option in options" @click="optionClicked(option)" class="vue-simple-context-menu__item">
        {{option.name}}
    </li>
</ul>

data () {
    return {
        ...
        id: null
    }
}, 
mounted () {
    this.id = "vue-simple-context-menu-id-" + this._uid;
}

of course, changing all references to this.id

[johndatserakis]

Hey there - good idea! I'll get this up and pushed by tonight.

[johndatserakis]

Ok dude - the update is up. I bumped the major version because now the prop of id is a required unique String. So we're at version 2.0.0.

I updated the styling a bit as well. The README has been updated to show users how to use multiple menus. The main example now has 2 menus - so check that out to see the implementation.

Let me know how it goes for you.

[RicardoRamirezR]

Great! Just a thing. Why is required the id when you can generate one like in the mounted function above, the this._uidgives a different number for each component.

[johndatserakis]

Good question! The main reason I have the developer set the id is so that they can control and organize the element to their liking. This puts it in their hands when developing. I've done this is in the past with another library and it seems to work well.