单击组件时向主体添加一个类？

Question

我在 vue 中有一个组件，我希望在单击时切换主体上的一个类。

我怎样才能做到这一点？我只需要使用 JS 来定位 body 并添加一个类吗？

还是有更多的 vue 方式？

对于上下文，我需要向主体添加一个无滚动类，以防止滚动覆盖菜单。

原文由 panthro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为对身体的反应性绑定通常是不受欢迎的。请参阅 Vue 团队成员的此论坛回复 以及 他链接到的文章。这让我觉得没有一种“vue 方式”可以在单击组件时更改 body 的类。

所以我认为，就像你说的，以 JS 为目标是最好的选择。

原文由 thanksd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我想我通过使用观察者找到了一种优雅的“vue 方式”。通过设置一个数据属性，即 active 并在点击时切换它。你可以添加一个观察者来检查它是真还是假，基于这个添加一个类或一些样式到身体。

当侧面板打开时，我需要它来禁用身体上的滚动条。我使用道具而不是数据，但这无关紧要。

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

原文由 Martin Risseeuw 发布，翻译遵循 CC BY-SA 3.0 许可协议