Применение классов к index.html в VueJs для событий в компонентах

Я использую шаблон BS4, который применяет классы к элементам <html> и <body> на основе событий на странице. Я безуспешно пробовал разные методы со страницы классов и стилей Vuejs здесь. . Я также попытался передать значение в качестве реквизита из App.vue на боковую панель, которая у меня есть как компонент.

Вот куда я попал, и v-bind не учитывает значение на корневом уровне.

В index.html

<body v-bind:class="{ sidebar-mini: this.$root.sidebarShrunk }">

В main.ts (точка входа)

new Vue({
  data: {
    sidebarShrunk: false,
  },
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

Обновление значения, как показано ниже, ничего не дает, класс sidebar-mini не применяется.

Обновление этого значения ничего не дает

ИЗМЕНИТЬ

Благодаря ответам ниже - это работает, но еще один вопрос, это лучший способ сделать это или его можно немного реорганизовать.

new Vue({
  data: {
    sidebarShrunk: false,
  },
  watch: {
    sidebarShrunk(sidebarShrunk) {
      if (sidebarShrunk) {
        document.body.classList.add('sidebar-mini');
      } else {
        document.body.classList.remove('sidebar-mini');
      }
    },
  },
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

vue.js bootstrap-4 bootstrap-vue
person K7Buoy    schedule 15.06.2018    source источник
comment
Я думал, что $root используется для доступа к данным: {} значениям, хранящимся в точке входа приложения.   -  person K7Buoy    schedule 15.06.2018
comment
Хотя нет, у меня есть. { 'sidebar-mini': this.$root.sidebarShrunk }. Одинарные кавычки! Фу.   -  person K7Buoy    schedule 15.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

Синтаксис Vue будет работать только с #app и его дочерними элементами, которые, по-видимому, не включают элемент body.

В таком случае вы можете использовать наблюдатель для установки класса body с помощью Vanilla Javascript.

  data: {
    sidebarShrunk: false,
  },
  watch:{
    sidebarShrunk: 
    {
      handler:function(value) {
        if(value)
          document.body.classList.add("sidebar-mini");
        else
          document.body.classList.remove("sidebar-mini");
      },
      immediate: true
    }
  },

демо: https://jsfiddle.net/jacobgoh101/xqLcuoav/5/

person Jacob Goh    schedule 15.06.2018
comment
Это был суперполезный ответ, спасибо. Обновил его для TypeScript, как показано ниже. new Vue({ data: { sidebarShrunk: false, }, watch: { sidebarShrunk(sidebarShrunk) { if (sidebarShrunk) { document.body.classList.add('sidebar-mini'); } else { document.body.classList.remove('sidebar-mini'); } }, }, router, store, render: (h) => h(App), }).$mount('#app'); - person K7Buoy; 15.06.2018