單擊組件時單擊正文添加類？

Question

我在vue中有一個組件，我希望在點擊時切換正文上的一個類。

我該怎麼做？我只需要使用JS來定位主體並添加一個類？

還是有更多的vue方式？

對於上下文，我需要在主體中添加一個no scroll類來防止覆蓋菜單的滾動。

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方法」。通過設置一個數據屬性即激活，並點擊切換。您可以添加一個觀察器來檢查它是真是假，基於此將類或樣式添加到主體。

我需要這個功能來打開側面板時禁用身體上的滾動。我使用道具而不是數據，但這不重要。

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