Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

This adds items to the select list dynamically through the script.

As regards the last part, we have two buttons Submit and Clear, which call the

methods submit() and clear(), respectively.

Now, you should have a form like this when you visit the URL

(http://localhost:8080/#/movies/add):

The * in the Movie Name denotes that it is a required field.

If you have noticed, we have been adding a # to all the routes that we have added. That is

because it is the default setting for the Vue.js router. We can remove that by adding mode:

'history' in routes/index.js:

import Vue from 'vue';

import Router from 'vue-router';

import Home from '@/components/Home';

import Contact from '@/components/Contact';

import AddMovie from '@/components/AddMovie';

Vue.use(Router);

export default new Router({