ページ上のイベントに基づいて<html>および要素にクラスを適用する BS4 テンプレートを使用しています。ここ<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');