title: Vue js toggle class of each individual element
body: <p>While there are many examples of toggling classes in Vuejs, I am yet to find one that toggles a class narrowing down the scope of the element. If I define a global variable like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>data: {
    toggle: false
  }
  </code></pre>
  
  <p>I will run into a problem when I have an element, like this navigation bar:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="menu"&gt;
    &lt;li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle"&gt;
      Foo
      &lt;ul class="dropdown"&gt;
        &lt;li&gt;Dropdown Item 1&lt;/li&gt;
        &lt;li&gt;Dropdown Item 2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle"&gt;
      Bar
      &lt;ul class="dropdown"&gt;
        &lt;li&gt;Dropdown Item 1&lt;/li&gt;
        &lt;li&gt;Dropdown Item 2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>See what happens here? If I click in one of these two elements, both are going to toggle the class at the same time, because it's changing a global variable. Now, how would I toggle the class of <em>only</em> the element that is clicked?</p>