コンポーネントをクリックしたときに本体にクラスを追加しますか？

Question

私はvueにコンポーネントを持っています。私はクリック時にボディ上のクラスを切り替えることを望みます。

どうすればいいですか？私は体をターゲットにしてクラスを追加するためにJSを使用しなければなりませんか？

これ以上の方法はありますか？

コンテキストの場合、オーバーレイメニューのスクロールを防ぐため、本文にスクロールクラスを追加する必要があります。

Answer 1

私は身体への反応性の結合は一般的に嫌われると思います。このforum response by Vue team memberとthe article he links toを参照してください。これは、コンポーネントがクリックされたときにボディのクラスを変更する "vueの方法"がないと私に思います。

あなたが言うように、JSで身体をターゲットにすることが最良の選択肢だと思います。

Answer 2

私はあなたが、これは参考を願っています：

• vue-body-class NPM
• vue-body-class GitHub

それはVUE-ルーターを使用してページ本体のクラスを制御することができます。 同様の問題に直面したときにこれを書きました。

Answer 3

私はウォッチャーを使用してエレガントな "vue way"を見つけたと思います。データ属性をアクティブに設定し、クリック時にこれを切り替えます。ウォッチャーを追加して、これがクラスまたはいくつかのスタイリングをボディに追加することに基づいて、それが真か偽かをチェックすることができます。

サイドパネルが開いているときに、本体のスクロールを無効にする必要がありました。私はデータの代わりに小道具を使用しますが、これは重要ではありません。

watch: { 
    // whenever active changes, this function will run 
    active: function() { 
    document.body.style.overflow = this.active ? 'hidden' : '' 
    } 
}