v-model with select dropdowns in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does v-model do when used with a <select> dropdown in Vue?

v-model binds the selected option's value to a Vue data property. When the user picks an option, the data updates automatically, and if the data changes, the selected option updates too.

intermediate

How do you bind multiple selections in a <select multiple> dropdown using v-model?

Use v-model with an array data property. Vue will add or remove values from the array as the user selects or deselects options.

beginner

What type of values does v-model bind from a <select> dropdown?

It binds the value attribute of the selected <option>. If no value is set, it binds the option's text content.

beginner

How can you set a default selected option using v-model with a <select>?

Initialize the data property bound by v-model to the value of the option you want selected by default.

intermediate

Why is it important to use the value attribute on <option> elements when using v-model?

Because v-model binds to the value attribute, setting it explicitly ensures the correct data is bound, especially if option text differs from the value you want to store.

What does v-model bind to in a single-select <select> dropdown?

A The text content of the <code>&lt;select&gt;</code>

B The first option always

C The number of options

D The value of the selected <code>&lt;option&gt;</code>

v-model binds to the value attribute of the selected option.

How do you bind multiple selected options in Vue using v-model?

A Bind to a string data property

B Bind to an array data property

C Bind to a number data property

D Bind to a boolean data property

For multiple selections, v-model must bind to an array to hold all selected values.

What happens if you don't set a value attribute on an <option>?

A The option is ignored

B Vue throws an error

C Vue binds the option's text content instead

D The option is always selected

If no value is set, Vue uses the option's text content as the bound value.

How do you set a default selected option in a <select> with v-model?

A Set the data property to the option's value before rendering

B Add <code>selected</code> attribute to the option

C Use <code>v-bind:selected</code> on the option

D Use <code>v-if</code> on the option

Setting the data property bound by v-model to the desired option's value selects it by default.

Which Vue directive is used to bind the selected value of a dropdown?

A <code>v-model</code>

B <code>v-bind</code>

C <code>v-for</code>

D <code>v-if</code>

v-model binds form inputs like dropdowns to data properties.

Explain how v-model works with a <select> dropdown in Vue. Include how it handles single and multiple selections.

Think about how the selected option and the data property stay in sync.

Describe how to set a default selected option in a Vue <select> dropdown using v-model.

Focus on the data property bound by <code>v-model</code>.

Practice

1. What does v-model do when used on a <select> dropdown in Vue?

easy

A. It binds the selected option's value to a Vue data property.

B. It disables the dropdown from user interaction.

C. It automatically submits the form when an option is selected.

D. It changes the dropdown options dynamically without user input.

Solution

1. Step 1: Understand v-model binding

   v-model creates a two-way binding between the dropdown's selected value and a Vue data property.

2. Step 2: Effect on dropdown selection

   When a user picks an option, the bound data property updates to that option's value automatically.

3. Final Answer:

   It binds the selected option's value to a Vue data property. -> Option A

4. Quick Check:

   v-model binds selection to data [OK]

Hint: v-model syncs dropdown choice with data property [OK]

Common Mistakes:

• Thinking v-model disables the dropdown
• Assuming v-model submits forms automatically
• Believing v-model changes options without user action

2. Which of the following is the correct syntax to bind a v-model to a <select> element in Vue?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Vue directive syntax

   v-model is used as a directive without colon or parentheses on form elements.

2. Step 2: Check each option's syntax

   uses correct syntax: v-model="selectedOption". Others misuse binding or add invalid characters.

3. Final Answer:

   <select v-model="selectedOption"> -> Option A

4. Quick Check:

   Use v-model="property" without colon or parentheses [OK]

Hint: Use v-model="property" directly on select [OK]

Common Mistakes:

• Adding colon before v-model
• Using parentheses after data property
• Using v-bind:model which is invalid

3. Given this Vue template snippet:

<select v-model="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>
<p>Selected: {{ fruit }}</p>

If the user selects "Banana", what will be displayed inside the <p> tag?

medium

A. Selected: fruit

B. Selected: banana

C. Selected: Banana

D. Selected: undefined

Solution

1. Step 1: Understand option values vs labels

   The option's value attribute is "banana" (lowercase), label is "Banana" (capitalized).

2. Step 2: v-model binds to option value

   When user selects "Banana", the bound data property fruit becomes "banana" (the value attribute).

3. Final Answer:

   Selected: banana -> Option B

4. Quick Check:

   v-model binds to option value, not label [OK]

Hint: v-model uses option's value attribute, not visible text [OK]

Common Mistakes:

• Assuming v-model binds to option label text
• Expecting data property to show variable name
• Confusing case sensitivity in values

4. What is wrong with this Vue code snippet?

<select v-model="selected">
  <option>One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

Assuming selected is initially "two", what issue will occur?

medium

A. The selected option will always be the first option regardless of v-model.

B. The dropdown will not render because of missing value on first option.

C. The v-model will throw a syntax error due to missing value attribute.

D. The first option has no value, so it binds as 'One' by default causing mismatch.

Solution

1. Step 1: Check option values

   The first option lacks a value attribute, so its value defaults to its text content "One".

2. Step 2: Compare initial v-model value

   Since selected is "two", Vue tries to match it with option values. It matches the second option, but the first option's missing value can cause confusion or unexpected behavior.

3. Final Answer:

   The first option has no value, so it binds as 'One' by default causing mismatch. -> Option D

4. Quick Check:

   Options without value default to text, causing binding issues [OK]

Hint: Always add value attribute to all options [OK]

Common Mistakes:

• Assuming missing value means empty string
• Expecting Vue to auto-assign numeric values
• Ignoring mismatch between v-model and option values

5. You want to create a dropdown with multiple selections using v-model in Vue. Which is the correct way to bind the <select> element to an array of selected values?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand multiple attribute usage

   To allow multiple selections, the multiple attribute is added without a value or with boolean true.

2. Step 2: Check v-model binding syntax

   Binding directly to an array property like selectedFruits works. Adding brackets or setting multiple as a string is incorrect.

3. Final Answer:

   <select v-model="selectedFruits" multiple> -> Option C

4. Quick Check:

   Use multiple attribute and bind v-model to array [OK]

Hint: Use multiple attribute and bind v-model to array property [OK]

Common Mistakes:

• Adding brackets [] in v-model binding
• Setting multiple="true" as string attribute
• Using :multiple="true" unnecessarily