todo vue list

list.vue

<template>
  <div>
    <div class="button-group">
      <button @click="getToDoes">Refresh</button>
      <button @click="enableAddMode" v-if="!addingToDo && !selectedToDo">Add</button>
    </div>
    <transition name="fade">
      <ul class="todoes" v-if="todoes && todoes.length">
        <li v-for="todo in todoes" :key="todo.id"
          class="todo-container"
          :class="{selected: todo === selectedToDo}">
          <div class="todo-element">
            <div class="badge" >{{todo.id}}</div>
            <div class="todo-text" @click="onSelect(todo)">
              <div class="name">{{todo.name}}</div>
              <div class="saying">{{todo.saying}}</div>
            </div>
          </div>
          <button class="delete-button" @click="deleteToDo(todo)">Delete</button>
        </li>
      </ul>
    </transition>
    <transition name="fade">
    <ToDoDetail
      v-if="selectedToDo || addingToDo"
      :todo="selectedToDo"
      @unselect="unselect"
      @todoChanged="todoChanged"></ToDoDetail>
    </transition>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';

import ToDoDetail from './ToDoDetail.vue';
import { todoService } from '../todo.service';
import { ToDo } from '../todo';

@Component({
  components: { ToDoDetail }
})
export default class ToDoList extends Vue {
  addingToDo = false;
  selectedToDo: ToDo | null = null;
  todoes: ToDo[] = <ToDo[]>[];

  created() {
    this.getToDoes();
  }

  deleteToDo(todo: ToDo) {
    return todoService.deleteToDo(todo).then(() => {
      this.todoes = this.todoes.filter(h => h !== todo);
      if (this.selectedToDo === todo) {
        this.selectedToDo = null;
      }
    });
  }

  enableAddMode() {
    this.addingToDo = true;
    this.selectedToDo = null;
  }

  getToDoes() {
    this.todoes = [];
    this.selectedToDo = null;
    return todoService.getToDoes().then(response => (this.todoes = response.data));
  }

  todoChanged(mode: string, todo: ToDo) {
    if (mode === 'add') {
      todoService.addToDo(todo).then(() => this.todoes.push(todo));
    } else {
      todoService.updateToDo(todo).then(() => {
        let index = this.todoes.findIndex(h => todo.id === h.id);
        this.todoes.splice(index, 1, todo);
      });
    }
  }

  onSelect(todo: ToDo) {
    this.selectedToDo = todo;
  }

  unselect() {
    this.addingToDo = false;
    this.selectedToDo = null;
  }
}
</script>