Vuejs переключить класс на тело по нажатию кнопки в компонентах

Question

Я хочу переключить класс на тело или на корневой элемент ("# app"), если я нажму на кнопку внутри компонента заголовка

Header.vue:

<template lang="html">
 <header>
  <button class="navbar-toggler navbar-toggler align-self-center" type="button" @click="collapedSidebar">
  <span class="mdi mdi-menu"></span>
  </button>
 </header>
</template>

<script>
export default {
  name: 'app-header',
  data: {
    isActive: false
  },
  methods: {
    collapedSidebar() {

    }
  }
}
</script>

App.vue:

<template lang="html">
  <div id="app" :class="{ active: isActive }">
   ...
  </div>
</template>

!Пожалуйста, поправьте меня, если я не в том направлении.Я новичок в Vuejs:)

Answer 1

проблема заключается в объеме вашего компонента.Вы пытались получить доступ к данным в Header.vue в App.vue, что невозможно по структуре, показанной в вашем коде.Рассмотрите возможность перемещения данных isActive в App.vue или используйте Vuex.

Answer 2

Вы можете создать событие внутри заголовка и, возможно, перехватить его в смонтированном компоненте приложения следующим образом:

На боковой панели или в другом компоненте:

on_some_btn_click: function (){

    this.$emit('toggle_root_class');

}

В компоненте приложения.:

mounted: function(){

    var _this = this;

    this.$on('toggle_root_class', function(){
             _this.active = !_this.active;
    });

}

Vue может ограничить возможность наблюдения события в компонентах одного уровня.Поэтому я использую EventBus в своих проектах, чтобы легко обрабатывать отправку событий.

Answer 3

Вы можете использовать jquery для переключения класса для элемента, который не находится внутри шаблона Vue.Вы можете вызывать функцию по нажатию кнопки, а внутри нее вы можете переключать класс в теге body, используя jquery.

<template lang="html">
 <header>
  <button class="navbar-toggler navbar-toggler align-self-center" type="button" :class="{ active: isActive }" @click="activeLink">
  <span class="mdi mdi-menu"></span>
  </button>
 </header>
</template>

<script>
export default {
  name: 'app-header',
  data: {
    isActive: false
  },
  methods: {
    activeLink() {
         $('body').toggleClass('.class-name');
    }
  }
}
</script>