Learn
Vue Forms
Text, Textarea, and Select Bindings

In Vue Data, we learned that there are two main places to store dynamic data in Vue apps: data for known dynamic values and computed for dynamic values that are determined using other dynamic values.

In web development, it is very common to add forms to sites to allow users to modify these types of dynamic values. As a result, Vue has implemented a directive, called v-model, that automatically binds form fields to dynamic values on the Vue app. When a form field is bound to a value, whenever the value in that form field changes, the value on the Vue app will change to the same value as well. Similarly, if the data on the Vue app changes, the value in the form field will automatically change to reflect the new value to the user.

<input type="text" v-model="username" />
const app = new Vue({ el: '#app', data: { username: 'Michael' } });

In this example, we bound an <input> field to a piece of Vue data called username, like so:

  • We added a piece of dynamic data to the Vue app called username
  • We used v-model on an <input> field to bind the <input> to the piece of data with the provided name: username.

Now, when this example site is loaded, the <input> will already be pre-filled with 'Michael', the starting value of username. Then, whenever the <input> is modified by the user, the username data value will automatically change to the value typed in by the user.

In this example, we bound the form field to a property on data. However, v-model also works with computed properties as well.

v-model works on all HTML form field elements. So, simple form fields such as <textarea> elements and <select> elements can be bound to data and computed properties in the exact same way: adding v-model="propertyName" to the opening tag of the elements.

We will cover slightly more complex form elements in the following exercises.

Instructions

1.

Let’s start binding our form fields to our Vue data!

Using v-model, bind the following text <input> fields to the specified Vue data:

  • Bind the “First Name” <input> to the firstName data property
  • Bind the “Last Name” <input> to the lastName data property
  • Bind the “Email” <input> to the email data property
  • Bind the “Signature” <input> to the fullName computed property

We’ve temporarily added a section, called the “Developer Pane”, to the top of the page that displays the current Vue data values of the fields we’re working on. Once you’ve finished setting up these <input> fields, try typing into each of them to see the value get updated in the developer pane.

Remember that modifying the “Signature” field will update fullName which will automatically update our firstName and lastName values due to the computed setter.

2.

Next, let’s bind our <textarea> field to our Vue data.

Bind the “Special Requests” <textarea> to the specialRequests data property.

Once you’re done, try typing into the “Special Requests” to see if the value in the developer pane is now updating as expected.

3.

Finally, let’s bind our <select> field to our Vue data.

Bind the “Ticket Quantity” <select> to the ticketQuantity data value.

Once you’re done, try selecting different “Ticket Quantity” options to see if the value in the developer pane is now updating as expected.

Folder Icon

Sign up to start coding

Already have an account?