Building Forms with Vue.js

Breaking down the form into components

Taking a look at App.vue, let's start with the smallest possible component that we can create. If you look carefully, you will see a repeating pattern in the code—this is usually a good sign that something could make for a good component!

Within our <form> element, we have three different text inputs. Two of them are of type text, and one of them is of type email. Looks like we will need some way to assign these values to the type attribute. A prop object could be a simple solution!

As a quick reminder, here's the current code for the form:

<div class="form-group">  <label>First Name:</label>  <input v-model="form.firstName" type="text" class="form-control"></div><div class="form-group"> <label>Last Name:</label> ...