JSFiddle - React, Tailwind, and code Playground

by Roland Doda

HTML

<div id="app">
    <h1>{{ activeTodo }}</h1>
    <ul>
      <li :class="{ completed: activeTodo.includes(todo.task) }" 
          @click="activeTodo.includes(todo.task) ? activeTodo.splice(todo, 1) : activeTodo.push(todo.task)"
          v-for="todo in todos"
          :key="todo.task"
      >
        {{ todo.task }}
      </li>
    </ul>
  </div>

CSS

ul {
  display: block;
}

.completed {
  text-decoration: line-through;
}

Vue

var app = new Vue({
  el: '#app',
  data: {
    message: 'List of things to do today',
    isActive: false,
    todos: [
      { task: 'Have breakfast'},
      { task: 'Go to the gym'},
      { task: 'Study Vuejs'}
    ],
    activeTodo: []
  }
});