Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

In AddMovie.vue, let's add the rules in input fields and bind the rules from the script:

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

required

:rules="releaseRules"

:items="years"

></v-select>

<v-text-field

label="Movie Genre"

v-model="genre"

required

:rules="genreRules"

></v-text-field>

<v-btn

@click="submit"

:disabled="!valid"

>

submit

</v-btn>

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

</v-form>

</template>

<script>

import axios from 'axios';

export default {

data: () => ({

valid: true,

name: '',

description: '',

genre: '',