Toggle class in Vue JS
<p>I'm looking to toggle a class using Vue JS. I've read through <a href="http://vuejs.org/guide/class-and-style.html" rel="nofollow">The Class and Style bindings</a> documentation but I'm still struggling to figure out the correct way to toggle a class.</p>

<p>I've simplified my code for brevity, but essentially I have a list of 4 'plans', each one with a button which allows the user to select the plan they want to purchase. With the current code the active class is added but when you click a button from another plan the class remains on the now non-active plan.</p>

<p>Here is the HTML.</p>

<pre><code>&lt;div id="app"&gt;
&lt;ul class="plans"&gt;
        &lt;plan-component :
                        name="Basic"
        &gt;&lt;/plan-component&gt;

        &lt;plan-component :
                        name="Recreational"
        &gt;&lt;/plan-component&gt;

        &lt;plan-component :
                        name="Team"
        &gt;&lt;/plan-component&gt;

        &lt;plan-component :
                        name="Club"
        &gt;&lt;/plan-component&gt;
      &lt;/ul&gt;

      &lt;template id="plan-component"&gt;
        &lt;li v-bind:class="{ 'active-plan': isActive }"&gt;
          &lt;h2 class="plan-name"&gt;{{ name }}&lt;/h2&gt;
          &lt;a href="#" v-on:click="makeActivePlan($event)" class="select-plan button"&gt;Choose this plan&lt;/a&gt;
        &lt;/li&gt;
      &lt;/template&gt;
&lt;/div&gt;
</code></pre>

<p>Here is the JS.</p>

<pre><code>Vue.component('plan-component', {
        template: '#plan-component',

      props: ['name', 'isActive'],

      methods: {
        makeActivePlan(e) {
            // We dispatch an event setting this to become the active plan
                e.preventDefault();
                this.isActive = true;
            this.$dispatch('set-active-plan', this);
        }
      }

    });

    new Vue({
      el: '#app',
      data: {
        activePlan: { name: 'n/a' }
      },

      events: {
        'set-active-plan': function(plan) {
            this.activePlan = plan;
        }
      },
    });
</code></pre>