v-model with radio buttons in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the value of selected after selecting the second radio button?

Consider this Vue 3 component using v-model with radio buttons. What will be the value of selected after the user clicks the second radio button labeled 'Option B'?

Vue

<template>
  <div>
    <input type="radio" id="optA" value="A" v-model="selected" />
    <label for="optA">Option A</label>
    <input type="radio" id="optB" value="B" v-model="selected" />
    <label for="optB">Option B</label>
  </div>
</template>

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

A "B"

B "A"

C undefined

D null

💡 Hint

Remember that v-model binds the value of the selected radio button to the variable.

When the user clicks the radio button with value "B", v-model updates the selected variable to "B".

📝 Syntax

intermediate

Which option correctly binds v-model to a radio button group?

Select the code snippet that correctly uses v-model with radio buttons in Vue 3.

A <input type="radio" v-model="choice" value="1" />

B <input type="radio" value="1" v-model="choice" />

C <input v-model="choice" type="radio" value="1" />

D <input type="radio" value="1" :v-model="choice" />

💡 Hint

The order of attributes does not affect functionality, but the syntax must be correct.

All options except D use correct syntax. However, :v-model is invalid. Options A, B, and C are valid, but only A is the canonical recommended order.

❓ state_output

advanced

What is the value of selected after this sequence of user actions?

Given this Vue 3 component, the user first selects 'Option C', then selects 'Option A'. What is the final value of selected?

Vue

<template>
  <div>
    <input type="radio" id="optA" value="A" v-model="selected" />
    <label for="optA">Option A</label>
    <input type="radio" id="optB" value="B" v-model="selected" />
    <label for="optB">Option B</label>
    <input type="radio" id="optC" value="C" v-model="selected" />
    <label for="optC">Option C</label>
  </div>
</template>

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

A "C"

B "B"

C "A"

D null

💡 Hint

Each radio button click updates the selected value to that button's value.

Initially, selected is "B". Selecting 'Option C' changes it to "C". Then selecting 'Option C' changes it to "A".

🔧 Debug

advanced

Why does this Vue 3 radio button group not update the selected value?

Examine this code. The radio buttons appear, but clicking them does not change the selected value. What is the cause?

Vue

<template>
  <div>
    <input type="radio" id="opt1" value="1" :v-model="selected" />
    <label for="opt1">One</label>
    <input type="radio" id="opt2" value="2" :v-model="selected" />
    <label for="opt2">Two</label>
  </div>
</template>

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

A The <code>id</code> attributes must be unique strings without numbers.

B The use of <code>:v-model</code> is incorrect; it should be <code>v-model</code> without a colon.

C The <code>selected</code> variable must be declared with <code>reactive</code> instead of <code>ref</code>.

D The <code>value</code> attributes must be numbers, not strings.

💡 Hint

Check the syntax of the v-model directive.

Using :v-model treats v-model as a dynamic prop binding, which is invalid. It should be v-model without a colon.

🧠 Conceptual

expert

What happens if multiple radio buttons share the same value but different id attributes with v-model?

In Vue 3, if you have multiple radio buttons with the same value but different id attributes all bound to the same v-model variable, what is the expected behavior when a user selects any of these buttons?

A Only the first radio button with that value can be selected; others are disabled.

B Vue throws a runtime error because radio buttons must have unique values.

C The <code>v-model</code> variable becomes an array of all selected values.

D Selecting any radio button sets the <code>v-model</code> variable to that shared value; the buttons behave as one group.

💡 Hint

Think about how radio buttons work in HTML and how v-model binds to their value.

Radio buttons with the same name (or bound by v-model) act as a group. If multiple have the same value, selecting any sets the model to that value. No error occurs.