We're live-coding on Twitch! Join us!

Before we start handling inputs with forms, it'd be nice to see another variation of data binding popularly known as two-way binding in other frontend frameworks.

To bind static values, we would write something like:


or use the v-bind directive as we have seen previously.

This is a one-way flow -- from the model to the view but NOT vice versa. Sometimes, especially when working with form controls, you might want your values to sync with the model while changes are made in the view via the form control.

To achieve this, we make us of the v-model directive:

<input v-model="value" type="text">
<p>You typed {{ value }}</p>

Not just text boxes, v-model works with any element that is used to collect form data:

<!-- Source: Vue form examples (https://vuejs.org/v2/guide/forms.html)-->

<!-- Check Boxes -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<!-- Radio Buttons-->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>


<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>


<span>Picked: {{ picked }}</span>

<!-- Select Boxes-->
<select v-model="selected">
  <option disabled value="">Please select one</option>

<span>Selected: {{ selected }}</span>

Like this article? Follow @codebeast on Twitter