Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

The first basic validation is the required validation:

<v-text-field

label="Movie Name"

v-model="name"

:rules="nameRules"

required

></v-text-field>

This adds a required validation in the name field.

Also, for the release_year field, we want it to be a dropdown of years, so, for that, we

have added the following:

<script>

export default {

data: () => ({

valid: true,

name: '',

description: '',

genre: '',

release_year: '',

nameRules: [

v => !!v || 'Movie name is required',

],

select: null,

years: [

'2018',

'2017',

'2016',

'2015',

],

}),

methods: {

submit() {

if (this.$refs.form.validate()) {

// Perform next action

}

},

clear() {

this.$refs.form.reset();

},

},

};

</script>