v-model modifiers (lazy, number, trim) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does the lazy modifier affect v-model updates?

Consider a Vue 3 component with an input bound using v-model.lazy. When does the component update its bound data compared to a normal v-model?

Vue

<template>
  <input v-model.lazy="text" />
  <p>{{ text }}</p>
</template>

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

A The data updates only when the input is cleared.

B The data updates only when the input loses focus (on blur event).

C The data updates immediately on every keystroke.

D The data updates only when the Enter key is pressed.

💡 Hint

Think about when the input event triggers versus the change event.

The lazy modifier delays updating the bound data until the input loses focus, which means the update happens on the change event instead of the input event.

❓ component_behavior

intermediate

What effect does the number modifier have on v-model?

Given an input bound with v-model.number, what type will the bound data have after user input?

Vue

<template>
  <input v-model.number="age" />
  <p>{{ typeof age }}</p>
</template>

<script setup>
import { ref } from 'vue'
const age = ref('')
</script>

A 'number', because the modifier converts input to a number.

B 'string', because input values are always strings.

C 'boolean', because the modifier converts input to true or false.

D 'object', because the modifier wraps the value.

💡 Hint

Consider what happens when you type '42' in the input.

The number modifier automatically converts the input string to a number type before updating the bound data.

📝 Syntax

advanced

Which v-model usage correctly trims whitespace from user input?

Select the correct Vue 3 template syntax that trims whitespace from the input value using v-model modifiers.

A <input v-model="trim(username)" />

B <input v-model.lazy.trim="username" />

C <input v-model="username.trim" />

D <input v-model.trim="username" />

💡 Hint

Modifiers are added after v-model separated by dots.

The trim modifier removes leading and trailing whitespace from the input before updating the bound data. It is used as v-model.trim.

🔧 Debug

advanced

Why does this v-model.number input not convert to a number?

Given this code, the bound data remains a string after input. What is the likely cause?

Vue

<template>
  <input v-model.number.lazy="score" />
  <p>{{ typeof score }}</p>
</template>

<script setup>
import { ref } from 'vue'
const score = ref('')
</script>

A Because <code>number</code> modifier does not work with <code>lazy</code> modifier.

B Because <code>score</code> is initialized as a string, it cannot convert to number.

C Because <code>lazy</code> delays update until blur, the number conversion happens only then.

D Because <code>v-model.number.lazy</code> syntax is invalid and ignored.

💡 Hint

Check when the data updates and when the conversion applies.

The lazy modifier delays the update until the input loses focus. The number modifier converts the value at update time, so the type remains string until blur.

🧠 Conceptual

expert

What is the combined effect of v-model.lazy.number.trim modifiers on an input?

Explain what happens to the bound data when using v-model.lazy.number.trim on an input element.

Vue

<template>
  <input v-model.lazy.number.trim="value" />
  <p>{{ value }} ({{ typeof value }})</p>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

A The input updates the bound data only on blur, trims whitespace, and converts the value to a number.

B The input updates on every keystroke, trims whitespace, but keeps the value as a string.

C The input updates only on blur, but does not trim or convert the value.

D The input updates on every keystroke, converts to number, but does not trim whitespace.

💡 Hint

Consider the order and effect of each modifier on update timing and value transformation.

The lazy modifier delays update until blur, trim removes whitespace before update, and number converts the trimmed string to a number before updating the bound data.