How do I write regular DOM functions in Nuxt.js???

Question

JavaScript

I don’t know how to do it anymore :( I
wrote the function for opening the context menu:

let el = document.querySelector("[data-context-menu]");

  el.onclick = function(e) {
    let target = e.target;
    let id = target.dataset.contextMenuId;
    let activeClass = "context-menu--active";

    console.log([target, id, activeClass]);

    let contextMenu = document.getElementById(id);

    if (contextMenu.classList.contains(activeClass)) {
      return contextMenu.classList.remove(activeClass);
    }

    contextMenu.classList.add(activeClass);
  };

I reload the page and it works every other time.

Answer 1

Why are you using 'plain' JS if you have Nuxt ?
document.querySelector -> to select an element use ref="superPuperMenu" ( https://en.vuejs.org/v2/api/#ref)
el.onclick -> @click="toggleMenu " ( https://en.vuejs.org/v2/api/#ref) vuejs.org/v2/api/#v-on)
add, remove class -> v-if="showMenu" ( https://ru.vuejs.org/v2/guide/conditional.html#v-if)
For beautiful display of the menu, wrap the body of the menu in a transition and add an animation.