Vue.js 2 Design Patterns and Best Practices

HTTP PUT

The next thing we'd like to be able to do is change items in our list. Perhaps we've made a mistake when submitting the item and we therefore want to edit it. Let's add that functionality.

Firstly, let's tell Vue to keep track of whenever we're editing a course. A user's intention to edit will be whenever they click a course name; we can then add the editing Boolean to our data object:

data() { return {  ROOT_URL: 'http://localhost:3000/courses/',  courses: [],  courseName: '',  editing: false, };},

Our template can then be changed to reflect this:

<template> <div class="course-list">  <h1>Courses</h1>  <div v-for="course in courses" v-bind:key="course.id">   <p @click="setEdit(course)" v-if="!editing">   {{course.name}}   </p> <div v-else> ...