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()
  }
 })