<template>
  <div id="todo-list-example">
    <input
      v-model="newTodoText"
      v-on:keyup.enter="addNewTodo"
      placeholder="Add a todo"
    >
    <ul>
      <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index,1)"
      ></li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        newTodoText: '',
        todos: [
          {
            id: 1,
            title: 'Do the dishes'
          }
        ],
        nextTodoId: 2
      }
    },
    methods: {
      addNewTodo () {
        this.todos.push({
          id: this.nextTodoId++,
          title: this.newTodoText
        })
        this.newTodoText = ''
      }
    },
    components: {
      'todo-item': {
        template: '<li>{{ title }}<button v-on:click="$emit(\'remove\')">X</button></li>',
        props: ['title']
      }
    }
  }
</script>

<style>

</style>
