Vue.js Quick Example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<div id="demo">
  <p>this doesn't work</p>
  <custom-btn 
    v-for="item in list1" 
    :state="item.active ? 'active' : 'inactive'" 
    v-on:click="item.active ? 'active' : 'inactive'">
    {{item.text}}
  </custom-btn>
  
  <hr>
  
  <p>this works</p>
  <span v-for="item in list2">
    <custom-btn 
      :state="item.active ? 'active' : 'inactive'" 
      v-on:click="item.active = !item.active">
      {{item.text}}
    </custom-btn>
  </span>
</div>

CSS

.active { 
  background: green;
}
.inactive { 
  background: #ccc;
}

JavaScript

var demo = new Vue({
    el: '#demo',
    data: {
    	list1: [{text: 'Joe', active: true}, {text:'Jane', active: true}],
      list2: [{text: 'Bob', active: true}, {text:'Kris', active: true}]
    },
    components: {
    	'custom-btn' : {
      	template: '<button class="{{state}}"><slot></slot></button>',
        props: {
        	state: {
          	type: String
          }
        }
      }
    }
})