Vue.js 2 Design Patterns and Best Practices

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 ...