HTTP DELETE

To delete items from our list, let's add a button so that, when the user enters edit mode (by clicking an item), they can remove that specific course:

<div v-else>
  <input type="text" v-model="course.name">
  <button @click="saveCourse(course)">Save</button>
  <button @click="removeCourse(course)">Remove</button>
</div> 

Our removeCourse function then looks as follows:

removeCourse(course) {
  axios
    .delete(`${this.ROOT_URL}/${course.id}`)
    .then(response => {
      this.setEdit();
      this.courses = this.courses.filter(c => c.id != course.id);
    })
    .catch(error => console.error(error));
},

We're calling the axios.delete method and then filtering our courses list for every course but the one we've deleted. This then updates our client state and makes it consistent with the database.

In this section of the chapter, we've created ourselves a simple "courses I want to study" list based on our REST API. It could have certainly been abstracted to multiple components, but as this wasn't the core focus of the application we've simply did it all in one.

Coming up next, let's make a real-time chat application with Node and Socket.io.