Как мне писать обычные функции для DOM в Nuxt.js???

Question

[Abdul Amenov]

Уже не знаю как делать :(

Написал функцию открытия контекстного меню:

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

Перезагружаю страницу и оно работает через раз.

Answer 1

[Alex Pospeliri]

А зачем ты используешь 'обычный' JS если у тебя Nuxt ?
document.querySelector -> для выбора элемента используй ref="superPuperMenu" (https://ru.vuejs.org/v2/api/#ref)
el.onclick -> @click="toggleMenu" (https://ru.vuejs.org/v2/api/#v-on)
add, remove class -> v-if="showMenu" (https://ru.vuejs.org/v2/guide/conditional.html#v-if)
Для красивого показа меню, тело меню оберни в transition и добавь анимацию.