v-model with text inputs in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output after typing?

Consider this Vue component using v-model on a text input. What will be displayed below the input after the user types 'hello'?

Vue

<template>
  <input v-model="message" type="text" aria-label="Message input" />
  <p>You typed: {{ message }}</p>
</template>

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

A You typed: {{ message }}

B You typed:

C You typed: hello

D You typed: undefined

💡 Hint

Remember that v-model binds the input value to the variable reactively.

When the user types 'hello', the message variable updates reactively because of v-model. The paragraph shows the current value of message, so it displays 'You typed: hello'.

📝 Syntax

intermediate

Which option correctly binds a text input with v-model?

Which of the following Vue template snippets correctly uses v-model to bind a text input to a variable named username?

A <input v-model="username" type="text" />

B <input v-model:username="text" />

C <input v-bind:value="username" />

D <input :value="username" v-model="username" />

💡 Hint

v-model is a directive that binds the input's value and listens for changes automatically.

Option A correctly uses v-model="username" to bind the input's value to the username variable. Option A mixes :value and v-model which is redundant and can cause issues. Option A only binds the value but does not listen for changes. Option A uses invalid syntax.

❓ state_output

advanced

What is the value of message after input event?

Given this Vue component, what will be the value of message after the user types 'Vue' in the input?

Vue

<template>
  <input v-model="message" type="text" aria-label="Message input" />
</template>

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

A undefined

B "vue"

C ""

D "Vue"

💡 Hint

The input updates the variable exactly as typed.

The v-model directive binds the input's value to the message variable reactively. When the user types 'Vue', message becomes 'Vue' exactly.

🔧 Debug

advanced

Why does this v-model binding not update the variable?

Look at this Vue component code. The input does not update the text variable when typing. What is the cause?

Vue

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

<script setup>
let text = ''
</script>

A The variable 'text' is not reactive because it is declared with 'let' instead of 'ref'.

B The input is missing the 'name' attribute required for v-model.

C The template must use 'v-bind' instead of 'v-model' for text inputs.

D The 'text' variable should be declared inside the template.

💡 Hint

Check how Vue tracks reactive data in script setup.

In Vue 3 with script setup, variables must be reactive to update the UI. Declaring text with let creates a normal variable, not reactive. Using ref('') makes it reactive and updates the UI when changed.

🧠 Conceptual

expert

What happens if you use v-model with a computed property without setter?

In Vue 3, if you bind a text input with v-model to a computed property that only has a getter (no setter), what will happen when the user types in the input?

Vue

<template>
  <input v-model="fullName" type="text" />
</template>

<script setup>
import { computed, ref } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

A The input will update normally and change the computed property value.

B Typing in the input will cause a runtime error because the computed property has no setter.

C The input will be read-only and not allow typing.

D The input will update but changes will be lost immediately.

💡 Hint

Think about how v-model tries to update the bound variable on input.

A computed property without a setter is read-only. v-model tries to update the value on input, but since there is no setter, Vue throws a runtime error indicating the computed property is read-only.