02_01 User Input

User Input

One of the features that makes Vue.js super helpful is how it handles user input an to do that, we use a directive called v-model.

v-model Directive

Update data on user input

input textarea select

• Two-way data binding
• Might ignore value, checked or selected
• Emits value input checked change

Try itgo.raybo.org/2Csi

The v-model directive lets you update your data based on changes made to different form elements.

It creates a relationship called two-way data binding. That means that when you modify a form element, it will also update data in your app. If for some reason the data changes the form will update as well.

v-model ignores sometimes ignores values on input fields. However, they might be useful when working with multiple checked or selected properties on form elements.

It will also generate properties and events when things change depending on the type of form. So checkboxes.

Modifiers

Change how v-model works

v-model.lazy v-model.number v-model.trim

There are several modifiers you can add to the v-model directive by adding a period and then an identifier.

The options are .lazy if you want the field to update after a change event instead of an input event. That means that for a text input field, you'd have to press tab or return in order for the variable to update.

Text fields are assummed to be strings by default. If you're sure you want a number, you can use the .number modifier.

.trim will get rid of any extra whitespace the user enters.

Binding in textarea

Expressions don't work inside <textarea>

<textarea></textarea>

<textarea v-model="myVar"></textarea>

Using expressions to output the value of a variable used for textarea won't work, you'll need to use v-model inside the textarea element instead.

Binding to checkboxes

Boolean for single, array for multiple

<input type="checkbox" v-model="myVar" 
  true-value="myValOne" false-value="myValTwo" />

<input type="checkbox" value="first" v-model="myArray" />
<input type="checkbox" value="second" v-model="myArray" />
<input type="checkbox" value="third" v-model="myArray" />

myArray : [];

Here are some of the options you can use for working with checkboxes. First, if the variable is a boolean, it can turn the checkbox on and off depending on wether it has a true or false value.

You can also pass a value using a true-value and false-value attribute with checkboxes, but be careful because a default uncheched checkbox won't have a value at all. If you require a default value, then use a radio button instead.

If you want to create more than one checkbox, you can give each input field a value. The values will be added or deleted from the array as you click on each checkbox.

Binding to radio

Same variable name, different values

<input type="radio" v-model="myVar" value="first" />
<input type="radio" v-model="myVar" value="second" />
<input type="radio" v-model="myVar" value="third" />

Try itgo.raybo.org/2CtF

Radio buttons are similar to checkboxes in that you use the same variable name, but you don't use an array and a single value will be captured, so use a variable instead of an array.

Choosing with select

v-model in <select>, smart options

<select v-model="myVar">
  <option value="">Choose...</option>
  <option>first</option>
  <option value="Option 2">second</option>
  <option>third</option>
</select>

Try itgo.raybo.org/2Cw4 Docsgo.raybo.org/2Csa

If you want to use a select field, put the v-model directive in the select field. The variable you place there will receive a value based on the options selected.

If you include a value, that will be sent to the variable, otherwise, it will try to send what's in between the currently selected option.

You can include an empty value and add the disabled option to the <option> tag if you want to have a label with no value, which is especially important in iOS.

You can also use an array instead of a regular variable as well as the multiple option for the select if you want users to pick multiple options. The options picked will get stored in the array.

You can even generate the options dyamically through data, which is pretty awesome. All these options are worth a look.

Practice

1. Use v-model to control max price
2. Add a .number filter
3. Create a displayLabels boolean
4. Use a checkbox to toggle value
5. Modify code to show/hide labels

Here's a good practice project. Here's the link to the starting code.
I've added some form elements using the bootstrap framework to help you control the pricing.

First, add a v-model to the text input field to show or change the maximum price variable.

Try using the number filter to make sure that the value casts to a number (try typing characters with the numbers)

Add a displayLabels boolean to the data

Now use a checkbox to toggle the value of this variable.

Modify the code so that the checkbox shows or hides the labels (be careful with the v-else statement)