fbonetti/todo

## todo
<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>
	<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>