JSFiddle - React, Tailwind, and code Playground

by Juan Manuel Cruz

HTML

<div class="container" id="vue-app">
  <h1>Mis ToDos</h1>
  <todo-list :todos="todos"></todo-list>
  <add-form v-on:add="handleAdd"></add-form>
</div>

<template id="todo-list-template">
  <div>
    <ul class="list-group" v-if="todos.length > 0">
      <li class="list-group-item" v-for="todo in todos" :key="todo.id" v-bind:class="{'text-muted': todo.done, 'totally-done': todo.done}" @click="toggleDoneState(todo)" @dblclick="removeTodo(todo)">
        {{todo.text}}
      </li>
    </ul>
    <pre class="text-center" v-else>No hay cosas para hacer</pre>
  </div>
</template>

<template id="add-form-template">
  <div>
    <form @submit.prevent="add()">
      <div class="form-group">
        <input type="text" v-model="inputTodo" class="form-control">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-success">Agregar todo</button>
      </div>
    </form>
  </div>
</template>

CSS

.totally-done {
  text-decoration: line-through;
}

JavaScript

var TodoList = Vue.extend({
  template: '#todo-list-template',
  props: ['todos'],
  methods: {
    toggleDoneState(todo) {
        todo.done = !todo.done
      },
      removeTodo(todo) {
        if (todo.done) this.todos.splice(this.todos.indexOf(todo), 1)
        else todo.done = !todo.done
      }
  }
})
var AddForm = Vue.extend({
  template: '#add-form-template',
  data() {
    return {
      inputTodo: ''
    }
  },
  methods: {
    add() {
    console.log('entro al add')
      this.$emit('add', this.inputTodo)
      this.inputTodo = ''
    },
  }
})
Vue.component('todo-list', TodoList)
Vue.component('add-form', AddForm)

var vm = new Vue({
  el: '#vue-app',
  data: {
    todos: [{
      id: 1,
      text: 'aprender laravel',
      done: false
    }, {
      id: 2,
      text: 'aprender vue',
      done: false
    }, {
      id: 3,
      text: 'hacer cosas increibles',
      done: false
    }],
    newTodo: ''
  },
  methods: {
    nextId() {
      return 1 + this.todos.reduce((max, cur) => Math.max(max, cur.id), 0)
      },
    handleAdd(todo) {
      if (this.newTodo !== todo) {
        this.todos.push({
          id: this.nextId(),
          text: todo,
          done: false
        })
      }
    }
  }
})