Vue.js 2 Design Patterns and Best Practices

Form submission

Next, we can disable our Submit button if the form is not valid:

<button :disabled="$v.$invalid" type="submit">Submit</button>

We can also get this value inside of our JavaScript with this.$v.$invalid. Here's an example of how we can check to see whether the form is invalid and then create a user object based on our form elements:

methods: {  onSubmit() {    if(!this.$v.$invalid) {      const user = {         email: this.email,        firstName: this.firstName,        lastName: this.lastName,        password: this.password,        repeatPassword: this.repeatPassword      }      // Submit the object to an API of sorts    }  },},

If you'd like to use your data in this fashion, you may prefer to set up your data object like so:

data() {  return {    user: {      email: '',      password: '', repeatPassword: ...