0

我正在使用一个 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');

如下更新值没有任何作用，侧边栏迷你类不适用。

更新这个值什么都不做

编辑

感谢下面的答案 - 这是有效的 - 但还有一个问题，它是最好的方法还是可以稍微重构一下。

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');
4

1 回答 1

2

Vue 的语法只适用于#app它的子元素，显然不包括 body 元素。

在这种情况下，您可以使用 watcher 使用 Vanilla Javascript 设置 body 类。

  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/

于 2018-06-15T10:18:46.830 回答