Vue js切换每个单独元素的类

Question

虽然在 Vuejs 中有很多切换类的示例，但我还没有找到一个可以切换类以缩小元素范围的示例。如果我这样定义一个全局变量：

 data: {
  toggle: false
}

当我有一个元素时，我会遇到一个问题，比如这个导航栏：

 <ul class="menu">
  <li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle">
    Foo
    <ul class="dropdown">
      <li>Dropdown Item 1</li>
      <li>Dropdown Item 2</li>
    </ul>
  </li>
  <li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle">
    Bar
    <ul class="dropdown">
      <li>Dropdown Item 1</li>
      <li>Dropdown Item 2</li>
    </ul>
  </li>
</ul>

看看这里发生了什么？如果我单击这两个元素之一，它们将同时切换类，因为它正在更改一个全局变量。现在，我将如何切换 仅 被单击的元素的类？

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

Answer 1

VueJS（以及大多数其他现代 Web 框架）的基本指导原则是一切都来自模型。

你永远不会谈论操纵 DOM；相反，您可以制作一个模型来描述您想要的效果。

在您的情况下，这意味着您需要两个 data 属性，而不是一个。

但是，您实际上应该做的是让每个列表项成为自己的子组件（然后子组件将获得自己的模型）。使用插槽在每个插槽中指定不同的内容。

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

Answer 2

令我感到困惑的是，如此简单的事情需要使用现代框架编写如此多的代码，这也是 JavaScript 开发变得如此复杂的原因。我求助于使用普通的 JavaScript 侦听器来解决这个问题。

 <li class="has-dropdown" @click="toggle">
    ...
</li>

 ...

methods: {
 toggle: function( event ) {
   event.target.classList.toggle('is-open')
 }
}

...

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