CRUD Operations

Adding new tasks

Now that we can see the list of tasks, it's time to add a few more.

Add the highlighted newTaskTitle ref and addTask function, and the relevant <form> to the App Component

// src/App.vue

<script setup lang="ts">
//...
const newTaskTitle = ref("")
async function addTask() {
  try {
    const newTask = await taskRepo.insert({ title: newTaskTitle.value })
    tasks.value.push(newTask)
    newTaskTitle.value = ""
  } catch (error) {
    alert((error as { message: string }).message)
  }
}
</script>
<template>
  <div>
    <h1>todos</h1>
    <main>
      <form @submit.prevent="addTask()">
        <input v-model="newTaskTitle" placeholder="What needs to be done?" />
        <button>Add</button>
      </form>
      <div v-for="task in tasks">
        <input type="checkbox" v-model="task.completed" />
        {{ task.title }}
      </div>
    </main>
  </div>
</template>

• the call to taskRepo.insert will make a post request to the server, insert the new task to the db, and return the new Task object with all it's info (including the id generated by the database)

Try adding a few tasks to see how it works

Rename Tasks and Mark as Completed

To make the tasks in the list updatable, we'll bind the input elements to the Task properties and add a Save button to save the changes to the backend database.

// src/App.vue

<script setup lang="ts">
//...
async function saveTask(task: Task) {
  try {
    await taskRepo.save(task)
  } catch (error) {
    alert((error as { message: string }).message)
  }
}
</script>
<template>
  <!-- ... -->
  <div v-for="task in tasks">
    <input type="checkbox" v-model="task.completed" @change="saveTask(task)" />
    <input v-model="task.title" />
    <button @click="saveTask(task)">Save</button>
  </div>
  <!-- ... -->
</template>

• The taskRepo.save method update the task to the server and returns the updated value
• • The saveTask function, called from the button's click event, and the checkbox's change event saves the task object to the backend. Make some changes and refresh the browser to verify the backend database is updated.

Browser's Network tab

As you play with these CRUD capabilities, monitor the network tab and see that they are all translated to rest api calls.

Delete Tasks

Let's add a Delete button next to the Save button of each task in the list.

Add the highlighted deleteTask function and Delete button

// src/App.vue

<script setup lang="ts">
//...
async function deleteTask(task: Task) {
  try {
    await taskRepo.delete(task)
    tasks.value = tasks.value.filter(t => task !== t)
  } catch (error) {
    alert((error as { message: string }).message)
  }
}
</script>
<template>
  <!-- ... -->
  <div v-for="task in tasks">
    <input type="checkbox" v-model="task.completed" @change="saveTask(task)" />
    <input v-model="task.title" />
    <button @click="saveTask(task)">Save</button>
    <button @click="deleteTask(task)">Delete</button>
  </div>
  <!-- ... -->
</template>