Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

Here, we added a route for AddMovie, which now means that we can access the add movie

page at http://localhost:8080/#/movies/add.

The next thing we need to do now is to create the vue component file. For that, let's add

a new AddMovie.vue file in src/components. Vuetify provides a very simple way to

create forms and add validations as well. You can look for more information at https:/​/

vuetifyjs.​com/​components/​forms.

Let's add the following content to src/components/AddMovie.vue:

<template>

<v-form v-model="valid" ref="form" lazy-validation>

<v-text-field

label="Movie Name"

v-model="name"

:rules="nameRules"

required

></v-text-field>

<v-text-field

name="input-7-1"

label="Movie Description"

v-model="description"

multi-line

></v-text-field>

<v-select

label="Movie Release Year"

v-model="release_year"

:items="years"

></v-select>

<v-text-field

label="Movie Genre"

v-model="genre"

></v-text-field>

<v-btn

@click="submit"

:disabled="!valid"

>

submit

</v-btn>

<v-btn @click="clear">clear</v-btn>

</v-form>

</template>

Vuetify also provides some basic validations to the form. Let's add some validation to it as
well.