Vue

by Admiral Potato

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <todo-list
    :todos="list_a"
    @todo-toggle="toggleItem(list_a, $event)"
  ></todo-list>
  <todo-list
    :todos="list_b"
    @todo-toggle="toggleItem(list_b, $event)"
  ></todo-list>
</div>

<script type="text/x-template" id="todo-list">
  <ol>
    <li
      v-for="(todo, index) in todos"
    >
      <label>
        <input
          type="checkbox"
          @input="toggle($event, index)"
          :checked="todo.done"
        >
        <component
          :is="todo.done ? 'del' : 'span'"
          :style="
            todo.done ? '' : 'color: red;'
          "
        >
          {{ todo.text }}
        </component>
      </label>
    </li>
  </ol>
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

JavaScript

var jsonClone = function (item) {
  return JSON.parse(JSON.stringify(item));
};

Vue.component('todo-list', {
  template: '#todo-list',
  props: {
    todos: Array
  },
  methods: {
  	toggle: function(event, index){
			event.preventDefault();
      console.log('toggle', index);
    	this.$emit(
      	'todo-toggle',
        index
      );
    }
  }
})

new Vue({
  el: "#app",
  data: {
    list_a: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],
    list_b: [
      { text: "pet some goats", done: false },
      { text: "Learn from goats", done: false },
      { text: "lick dat mineral", done: true },
      { text: "climb up 89 degree sheer rock wall", done: true }
    ]
  },
  methods: {
  	toggleItem: function (list, itemIndex) {
			var existingTodo = list[itemIndex];
			if (!existingTodo.done) {
        var newTodo = jsonClone(existingTodo);
        newTodo.done = !newTodo.done;
        console.log('toggleItem', list, itemIndex, newTodo);
        list.splice(
          itemIndex,
          1,
          newTodo
        );
      }
    } 
  }
})