[Vuejs]-Apply classes to index.html in VueJs on events in components

2👍

Vue’s syntax will only work on #app and its children, which apparently doesn’t include the body element.

In a case like this, you can use watcher to set the body class using 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
    }
  },

demo: https://jsfiddle.net/jacobgoh101/xqLcuoav/5/

Leave a comment