Building the Real Application Chapter 5Add the following code to AddMovie.vue inside the script tag:
<template>
...
</template>
<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>If we look into the form element in AddMovie.vue, the line that says:
<v-form v-model="valid" ref="form" lazy-validation>What v-model="valid" part does here is, it makes sure the form does not get submitted
until it is true, which again ties back to the script that we have added in the bottom. Also,
let's look into the validations that we have added to the form.