Vue js 切换每个元素的类

虽然 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>

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

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

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

...

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

...