Question

我正在使用BS4模板，该模板根据页面上的事件将类应用于<html>和<body>元素。我从Vuejs Class和Style页面here尝试了不同的技术但没有成功。我也尝试将值作为App.vue中的prop传递给我作为组件的补充工具栏。

这是我必须去的地方，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');

Answer 1

Vue的语法只适用于#app及其子代，它们显然不包含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/

将类应用于VueJs中的index.html组件中的事件

1 个答案: