Как вызвать изменение одного компонента при клике на другом во vue?

Question

[Ankozar]

Нужно при клике на меню блокировать/разблокировать скроллинг body.
Без vue, при клике на меню, я мог просто воспользоваться elQuerySelector(body) и заменить нужное свойство.

Пока на vue я знаю два способа: через параметр vuex или тупо в методах компонента меню прописать изменение стиля body с помощью того же elQuerySelector. Но, как я понимаю, это не совсем правильно.

Или, всё же, vuex?

Comments

[Сергей delphinpro]

Вьюкс здесь совершенно не нужен.
Body всё равно лежит вне приложения (вне #app). Просто напрямую меняйте его стили/классы. И querySelector здесь тоже не нужен. Есть прямой доступ через document.body

[Ankozar]

Сергей delphinpro, ага, спасибо.
А есть способ вынести такой код в модуль и исопльзовать через директивы?
Просто у меня несколько блоков будут управлять body. Это, получается, код в методах дублировать. А если бы можно было указать в @click='что-то...', то только это бы дублировалось.

[Сергей delphinpro]

Да просто в функцию вынесите

export function lockScreen() {
  document.body.style = '';
}

///////////////

import {lockScreen} from '@/functions';

methods: {
  toggle() {
    lockScreen();
  }
}

<button @click="toggle">
  Menu
</button>