Skip to Content
Vue Forms

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!

Folder Icon

Sign up to start coding

Already have an account?