title: How do I toggle the classes of individual <li> elements?
body: <p>When I toggle my variable <code>active</code> in the code below, the <code>active</code> CSS class is applied/removed from all elements in the list. How do I target the list elements individually? The Todo-List example has similar functionality (with todo / todo completed), but it's a bit beyond my skill set.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li v-bind:class="{ active: active }" v-on:click="toggleActive"&gt;Test 1&lt;/li&gt;
      &lt;li v-bind:class="{ active: active }" v-on:click="toggleActive"&gt;Test 2&lt;/li&gt;
      &lt;li v-bind:class="{ active: active }" v-on:click="toggleActive"&gt;Test 3&lt;/li&gt;
  &lt;/ul&gt;
  
  toggleActive: function() {
      this.active = !this.active;
  }
  </code></pre>