v-model with select dropdowns in Vue - Performance & Optimization

Performance: v-model with select dropdowns

MEDIUM IMPACT

This affects how quickly the dropdown updates the UI and how many DOM updates happen when the user selects an option.

Binding a select dropdown with many options and v-model

Vue

<template>
  <select v-model="selectedId">
    <option v-for="item in items" :key="item.id" :value="item.id">
      {{ item.name }}
    </option>
  </select>
</template>

<script setup>
import { ref, computed } from 'vue'
const selectedId = ref(null)
const items = ref(Array(1000).fill(0).map((_, i) => ({ id: i, name: `Item ${i}` })))
const selected = computed(() => items.value.find(item => item.id === selectedId.value))
</script>

Binding primitive values (like IDs) reduces reactivity overhead and avoids deep object comparisons.

📈 Performance GainImproves input responsiveness by reducing re-renders and memory usage.

Binding a select dropdown with many options and v-model

Vue

<template>
  <select v-model="selected">
    <option v-for="item in items" :key="item.id" :value="item">
      {{ item.name }}
    </option>
  </select>
</template>

<script setup>
import { ref } from 'vue'
const selected = ref(null)
const items = ref(Array(1000).fill(0).map((_, i) => ({ id: i, name: `Item ${i}` })))
</script>

Binding entire objects as option values causes Vue to do deep comparisons and triggers many re-renders on selection.

📉 Performance CostTriggers multiple re-renders and increases memory usage, slowing input responsiveness (INP).

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Binding full objects as option values	High (many reactive dependencies)	Multiple reflows on selection	High paint cost due to re-renders	[X] Bad
Binding primitive IDs as option values	Low (simple reactive refs)	Single reflow on selection	Low paint cost	[OK] Good

Rendering Pipeline

When v-model updates on select change, Vue updates reactive state, triggers reactivity system, then updates DOM nodes for selected option.

→Reactivity Update

→Virtual DOM Diff

→DOM Update

→Paint

⚠️ BottleneckReactivity Update and Virtual DOM Diff when binding complex objects

Core Web Vital Affected

INP

This affects how quickly the dropdown updates the UI and how many DOM updates happen when the user selects an option.

Optimization Tips

1Bind primitive values (like IDs) in select options instead of full objects.

2Avoid complex reactive objects as v-model values to reduce re-renders.

3Use computed properties to map selected IDs back to objects if needed.

Performance Quiz - 3 Questions

What is the main performance issue when binding entire objects as option values in v-model select?

A Vue does deep comparisons causing slow reactivity updates

B The browser blocks rendering due to large CSS files

C The select element triggers multiple network requests

D The options are not accessible for screen readers

DevTools: Performance

How to check: Record a performance profile while selecting options in the dropdown. Look for long scripting or rendering tasks triggered by selection.

What to look for: Check for multiple re-renders or long scripting times indicating heavy reactivity or DOM updates.

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