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.

Practice

1. What does v-model do when used with radio buttons in Vue?

easy

A. It binds the selected radio button's value to a single data property.

B. It creates multiple independent data properties for each radio button.

C. It disables all radio buttons except the first one.

D. It automatically submits the form when a radio button is clicked.

Solution

1. Step 1: Understand v-model binding

   The v-model directive in Vue binds form inputs to a data property, syncing the input's value with the data.

2. Step 2: Apply to radio buttons

   For radio buttons, v-model binds the selected button's value to a single data property, so only one value is stored.

3. Final Answer:

   It binds the selected radio button's value to a single data property. -> Option A

4. Quick Check:

   v-model syncs selected radio value = C [OK]

Hint: v-model links one data value to all radios in a group [OK]

Common Mistakes:

• Thinking each radio has its own data property
• Assuming v-model disables radios
• Believing v-model auto-submits forms

2. Which of the following is the correct syntax to bind a radio button group with v-model to a data property named choice?

easy

A. <input type='radio' :model='choice' value='A'>

B. <input type='radio' v-bind='choice' value='A'>

C. <input type='radio' v-model='value' value='choice'>

D. <input type='radio' v-model='choice' value='A'>

Solution

1. Step 1: Identify correct directive usage

   The correct directive to bind input value to data is v-model, not v-bind or :model.

2. Step 2: Check attribute values

   The value attribute sets the radio's value, and v-model='choice' binds the selected value to the choice data property.

3. Final Answer:

   <input type='radio' v-model='choice' value='A'> -> Option D

4. Quick Check:

   Use v-model='choice' with value='A' = A [OK]

Hint: Use v-model='dataProp' and value='option' for radios [OK]

Common Mistakes:

• Using v-bind instead of v-model
• Swapping value and v-model attributes
• Using incorrect directive like :model

3. Given this Vue template snippet:

<template>
  <input type='radio' id='red' v-model='color' value='red'>
  <label for='red'>Red</label>
  <input type='radio' id='blue' v-model='color' value='blue'>
  <label for='blue'>Blue</label>
  <p>Selected color: {{ color }}</p>
</template>

If the user clicks the radio button labeled "Blue", what will be displayed inside the paragraph?

medium

A. Selected color: undefined

B. Selected color: red

C. Selected color: blue

D. Selected color: true

Solution

1. Step 1: Understand v-model behavior on radio buttons

   When a radio button is selected, its value is assigned to the bound data property, here color.

2. Step 2: Apply user action

   User clicks the radio with value='blue', so color becomes 'blue'. The paragraph shows this value.

3. Final Answer:

   Selected color: blue -> Option C

4. Quick Check:

   Click blue radio sets color = 'blue' [OK]

Hint: Selected radio's value updates bound data shown in template [OK]

Common Mistakes:

• Assuming initial value stays after click
• Confusing value attribute with label text
• Expecting boolean true instead of string value

4. Consider this Vue code snippet:

<input type='radio' v-model='selection' value='A'>
<input type='radio' v-model='selection' value='B'>
<input type='radio' v-model='selection' value='C'>

Why might none of the radio buttons appear selected even after clicking them?

medium

A. Radio buttons require a name attribute to work with v-model.

B. The data property selection is not initialized in the Vue component.

C. The v-model directive is misspelled.

D. The value attributes are missing from the radio buttons.

Solution

1. Step 1: Check data initialization

   Vue's v-model binds to a data property. If selection is undefined initially, no radio is selected by default.

2. Step 2: Understand radio selection behavior

   Clicking a radio sets selection to that value, but if the component does not react or update, it may be due to missing reactive data or errors elsewhere.

3. Final Answer:

   The data property selection is not initialized in the Vue component. -> Option B

4. Quick Check:

   Uninitialized data property causes no selection [OK]

Hint: Always initialize data properties used with v-model [OK]

Common Mistakes:

• Thinking name attribute is required for v-model radios
• Ignoring data property initialization
• Assuming misspelled v-model without checking

5. You want to create a group of radio buttons bound to selectedFruit with options 'Apple', 'Banana', and 'Cherry'. You also want the label text to be clickable for accessibility. Which of the following Vue template snippets correctly implements this?

hard

A. <div>
<label>
<input type='radio' v-model='selectedFruit' value='Apple'> Apple
</label>
<label>
<input type='radio' v-model='selectedFruit' value='Banana'> Banana
</label>
<label>
<input type='radio' v-model='selectedFruit' value='Cherry'> Cherry
</label>
</div>

B. <div>
<input type='radio' v-model='selectedFruit' value='Apple'>
<label>Apple</label>
<input type='radio' v-model='selectedFruit' value='Banana'>
<label>Banana</label>
<input type='radio' v-model='selectedFruit' value='Cherry'>
<label>Cherry</label>
</div>

C. <div>
<input type='radio' v-model='selectedFruit' value='Apple'> Apple
<input type='radio' v-model='selectedFruit' value='Banana'> Banana
<input type='radio' v-model='selectedFruit' value='Cherry'> Cherry
</div>

D. <div>
<input type='radio' id='apple' v-model='selectedFruit' value='Apple'> Apple
<input type='radio' id='banana' v-model='selectedFruit' value='Banana'> Banana
<input type='radio' id='cherry' v-model='selectedFruit' value='Cherry'> Cherry
</div>

Solution

1. Step 1: Understand label accessibility

   Wrapping the input inside a label makes the label text clickable and improves accessibility without needing for and id.

2. Step 2: Check the options

   <div>
     <label>
       <input type='radio' v-model='selectedFruit' value='Apple'> Apple
     </label>
     <label>
       <input type='radio' v-model='selectedFruit' value='Banana'> Banana
     </label>
     <label>
       <input type='radio' v-model='selectedFruit' value='Cherry'> Cherry
     </label>
   </div>

   wraps each radio input inside a label with the text, which is the recommended accessible pattern.

3. Final Answer:

   The snippet wrapping inputs inside <label> tags for clickable labels. -> Option A

4. Quick Check:

   Wrap input in label for clickable text = B [OK]

Hint: Wrap input inside label for easy clickable text [OK]

Common Mistakes:

• Using labels without for/id pairs
• Not wrapping input in label causing unclickable text
• Forgetting to bind v-model on each radio