Check this solution, ( I am a newbie in VUEjs ).
Pass item to markComplete function like v-on:change="markComplete(item)", Then toggle the item.completed, like
markComplete(e) {
e.completed = !e.completed
}
Check the snippet, hope this is what you are looking for
myObject = new Vue({
el: '#app',
data: {
todos: [{
id: 1,
title: 'Learn HTML',
completed: true
},
{
id: 2,
title: 'Learn CSS',
completed: false
}
]
},
methods: {
markComplete(e) {
e.completed = !e.completed
}
}
}).is-complete {
text-decoration: line-through;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item,key) in todos" v-bind:class="{'is-complete':item.completed}">
<input type="checkbox" v-on:change="markComplete(item)" :checked="item.completed"> {{ item.title }}
</li>
</ul>
</div>