Trying to use v-on:blur for making disappear a context menu...but it doesn't work
the blur
event only exists for form controls (<input>
etc.).
Your problem is generally solved by creating a custom directive that runs a method when you click outside of the menu.
Something like this:
https://www.npmjs.com/package/v-click-outside
<ul class="context-menu"
ref="contextMenuTrack"
v-if="openedMenu === 'contextMenuTrack'"
v-bind:style="{top: top, left: left}"
v-click-outside="closeMenu()">
<li v-on:click="removeTrack(project.structure.tracks.indexOf(targetOfMenu));closeMenu()">delete track</li>
</ul>
Hope this helps
Edit:
An example with a better package (vue-clickaway):
https://jsfiddle.net/Linusborg/hqkgp4hm/
This would help if you are looking for unrecommended way ;) $refs would be tricky on having the same result.
let x = document.querySelector('.targetClass).addEventListener('click', (e) =>
{
if(e.target.className == 'targetClass') {
this.close()
}
})