Vue.js Object updates

by Chuck May

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.js"></script>
<div id="app">
	<ul>
		<li 
			v-repeat="people"
			v-on="click: toggleActive(this)"
			v-class="open: active">
                {{ name }}
        </li>
	</ul>
    <pre>
    {{ people | json }}
    </pre>
</div>

CSS

.open {color: red;}

pre { background: #eee;padding: 1em;}

JavaScript

new Vue({
	el: '#app',
	data: {
		people: [
			{name: 'mike'},
			{name: 'joe',active: true},
			{name: 'tom'},
			{name: 'mary'}
		]
	},
	methods: {
		toggleActive: function(person) {
			// remove active from all people
			this.people.forEach(function(person){
				person.$set('active',false);
			});
            //set active to clicked person
			person.$set('active',true);
		}
	}
});