ToDo.vue

gistfile1.txt

<template lang="html">
  <div>
    <form v-on:submit='ekleToDo($event)'>
      <input type='text' placeholder='Ne yapacaksın?' v-model='yeniToDo'/>
      <input type='submit' />
    </form>
    <ul>
      <li v-for='todo in todos'>
        <span>{{todo.title}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import ToDoAPI from "@/services/ToDoAPI.js";
export default {
  data() {
    return {
      yeniToDo: "",
      todos: []
    };
  },
  mounted() {
    this.loadTodos();
  },
  methods: {
    async ekleToDo(evnt) {
      evnt.preventDefault();
      const response = await ToDoAPI.addTodo(this.newTodo);
      this.todos.push(response.data);
      this.yeniToDo = "";
    },
    async loadTodos() {
      const response = await ToDoAPI.getToDos();
      this.todos = response.data;
    }
  }
};
</script>
<style lang="css">
</style>