Congratulations, you now know how to bind HTML forms to Vue data and listen to events in Vue! Let’s review the major takeaways from this lesson:

  • Form fields can be bound to Vue data using the v-model directive — how v-model is used depends on the type of field it is being added to
  • Form event handlers can be added using v-on:submit and v-on:reset
  • Modifiers can be used to add functionality to directives — most importantly preventing page reload on form submission using v-on:submit.prevent and cleaning up form field values using .number and .trim
  • Form validation can be implemented by setting the value of the disabled attribute on a <button> to the value of a computed property using v-bind

Good job on tackling all of this material! You can now create a pretty significant front-end using Vue. You should be proud of how far you’ve come in such a short period of time. Good work!

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?