Vue.js 2 Design Patterns and Best Practices

HTTP POST

We can add an input box and button following the courseName div, allowing the user to input a new course to their learning list:

<div> <input type="text" v-model="courseName" placeholder="Course name">  <button @click="addCourse(courseName)">Add</button></div>

This requires us to add the courseName variable to our data object:

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

We can then create a similar method named addCourse that takes the courseName as a parameter:

methods: {// Omitted addCourse(name) {  axios   .post(this.ROOT_URL, { name })   .then(response => {     this.courses.push(response.data);     this.courseName = '';    })   .catch(error => console.log(error)); }}

You may notice that it's ...