Binding the inputs to local state

The purpose of forms in a web application is to capture some user input and be able to do something with it. In our example, we still don't have any way to access the user's input with JavaScript for our Vuetiful plans—so, let's start with that.

Please note that you do not necessarily have to wrap up your form's data inside a secondary object, but, I have found it to be cleaner—especially when you start adding other data properties to your component, which may not necessarily be related to your form.

Create a new data property on the instance of your App.vue file. Inside of it, we're going to declare a form object, which will, in turn, hold a property for each one of our inputs:

<script>
export default {
  name: 'app',
  data() {
    return {
      form: {
        firstName: &apos...