Guide: Form Input Bindings

Question 1

What elements does v-model work on and what does it do?

Answer 1

• input, textarea, and select elements
• It automatically picks the correct way to update the element based on the input type
  
  • Basically syntactic sugar for updating data on user input events

Question 2

What are two importnat gotchas of v-model?

Answer 2

1. It will ignore initial value, checked, or selected attributes found on any form element that it’s on. It will treat the Vue instance data as the source of truth
2. v-model does trigger updates during IME composition (languages such as Chinese, Korean, Japanese,…)

Question 3

How do you use v-model for normal text?

Answer 3

`<input></input>

Question 4

How do you use v-model with multiline text?

And how do you get newlines to display properly?

And what’s something important to note about this element?

Answer 4

textarea v-model="message"\>

Use white-space: pre-line on the the block containing the text.

Interpolation on textareas won’t work textarea\>{{text}}: must use v-model

Question 5

How do you use v-model with a single checkbox?

Answer 5

Use a boolean property and assign it to the checkbox. It will be either true or false

<input></input>

Question 6

How do you use v-model with multiple checkboxes?

And what will happen?

Answer 6

<input type="checkbox" value="Jack" v-model="checkedNames">

<input type="checkbox" value="John" v-model="checkedNames">

Bounding them all to the same array will add and remove their values from the array

Question 7

How do you use v-model on a radio element?

Answer 7

<input type="radio" value="Blue" v-model="picked">

It will assign the value of the radio element selected to the bound property.

Question 8

How do you handle a single select with v-model?

What’s an important gotcha?

Answer 8

<select v-model="selected"></select>

It will assign the selected option to the bound property

You should always recommended to provided a disabled option with an empty value, because iOS will not fire the first item because it does not provide a not selected option if none of the options match the initial value.

Question 9

How do you handle multiple select with v-model?

Answer 9

If select has the multiple attribute, you must bind an array to the v-model directive, in which case all options (or values) that are selected will be in the array.

Question 10

Describe using bound values for input elements instead of static ones?

Answer 10

• Checkboxes
  
  • Can use true-value and false-value as values that will be assigned to the property in v-model when the checkbox is and is not checked respectively
• Radio
  
  • use :value to assign a dynamic property to a radio element
• Select
  
  • again use :value to assign a dynamic property to an <option></option>

Question 11

What’s the default behavior of v-model syncing? And what modifier can be used to change that?

Answer 11

• v-model by default syncs after each input event
• Use the .lazy modifier to sync after change events instead

Question 12

What if you want to deal in numbers only with an input?

Answer 12

• Use the .number modifier to automatically typecast the value as a number
• Even with type="number", the element still returns a string
• If value can’t be parsed with parseFloat(), then original value is returned

Question 13

How do you handle trimming?

Answer 13

• Add .trim modifier to v-model to automatically trim input