vue.js - Toggle class in Vue JS -

i'm looking toggle class using vue js. i've read through the class , style bindings documentation i'm still struggling figure out correct way toggle class.

i've simplified code brevity, have list of 4 'plans', each 1 button allows user select plan want purchase. current code active class added when click button plan class remains on non-active plan.

here html.

<div id="app"> <ul class="plans">         <plan-component :                         name="basic"         ></plan-component>          <plan-component :                         name="recreational"         ></plan-component>          <plan-component :                         name="team"         ></plan-component>          <plan-component :                         name="club"         ></plan-component>       </ul>        <template id="plan-component">         <li v-bind:class="{ 'active-plan': isactive }">           <h2 class="plan-name">{{ name }}</h2>           <a href="#" v-on:click="makeactiveplan($event)" class="select-plan button">choose plan</a>         </li>       </template> </div> 

here js.

vue.component('plan-component', {         template: '#plan-component',        props: ['name', 'isactive'],        methods: {         makeactiveplan(e) {             // dispatch event setting become 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;         }       },     }); 

if plan-component closely related parent, use $parent property get/set active plan:

vue.component('plan-component', {    template: '#plan-component',      props: ['name'],      computed: {      isactive () {      	return this.$parent.activeplan.name === this.name      }    },        methods: {      makeactiveplan () {        this.$parent.activeplan.name = this.name      }    }  })    new vue({    el: '#app',        data: {      activeplan: { name: 'club' }    }  })

.active-plan { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>    <div id="app">    <ul class="plans">      <plan-component name="basic"></plan-component>      <plan-component name="recreational"></plan-component>      <plan-component name="team"></plan-component>      <plan-component name="club"></plan-component>    </ul>      <template id="plan-component">      <li :class="{ 'active-plan': isactive }" @click.prevent="makeactiveplan">        <h2 class="plan-name">{{ name }}</h2>      </li>    </template>  </div>