Skip to content

Instantly share code, notes, and snippets.

@fbonetti
Last active Oct 31, 2018
Embed
What would you like to do?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.completed {
text-decoration: line-through
}
</style>
</head>
<body>
<div id="todo-app">
<ul>
<li v-for="(task, index) in tasks"
v-bind:class="{ completed: task.completed }"
v-on:click="toggleTaskCompleted(index)"
>
{{ task.name }}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#todo-app',
data: {
tasks: [
{ name: 'Walk the dog', completed: false },
{ name: 'Pay bills', completed: false },
{ name: 'Make dinner', completed: false },
{ name: 'Code for one hour', completed: false }
]
},
methods: {
toggleTaskCompleted: function (index) {
const task = this.tasks[index]
task.completed = !task.completed
this.$set(this.tasks, index, task)
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment