v-model with radio buttons in Vue - Step-by-Step Execution

Concept Flow - v-model with radio buttons

User clicks a radio button

↓

v-model updates bound variable

↓

Component re-renders with new value

↓

Radio buttons reflect selected state

When a user clicks a radio button, v-model updates the bound variable, triggering a re-render that updates which radio button appears selected.

Execution Sample

Vue

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

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

This Vue component uses v-model to bind a variable 'color' to two radio buttons, showing the selected color below.

Execution Table

Step	User Action	v-model Variable 'color'	Component Rendered Output	Radio Button Selected
1	Page loads	'red' (initial)	Selected color: red	Red radio button checked
2	User clicks 'Blue' radio button	'blue'	Selected color: blue	Blue radio button checked
3	User clicks 'Red' radio button	'red'	Selected color: red	Red radio button checked
4	User clicks 'Blue' radio button again	'blue'	Selected color: blue	Blue radio button checked
5	No further clicks	'blue'	Selected color: blue	Blue radio button checked

💡 No more user actions; variable 'color' remains 'blue' and UI reflects this.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
color	'red'	'blue'	'red'	'blue'	'blue'

Key Moments - 3 Insights

Why does clicking a radio button update the 'color' variable?

Because v-model binds the radio buttons to 'color', so when a radio button is clicked, v-model automatically sets 'color' to that button's value, as shown in execution_table steps 2 and 3.

Why does the UI text update when 'color' changes?

Vue re-renders the component when 'color' changes, updating the displayed text to match the new value, visible in the 'Component Rendered Output' column of the execution_table.

Can only one radio button be selected at a time?

Yes, radio buttons with the same v-model variable act as a group, so only one can be selected, as seen in the 'Radio Button Selected' column where only one button is checked per step.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'color' after step 3?

A 'red'

B 'blue'

C 'green'

D 'yellow'

💡 Hint

Check the 'v-model Variable 'color'' column at step 3 in the execution_table.

At which step does the 'Blue' radio button become selected?

A Step 1

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Radio Button Selected' column in the execution_table.

If the initial value of 'color' was 'blue' instead of 'red', what would be true at step 1?

A Red radio button checked

B Blue radio button checked

C No radio button checked

D Both radio buttons checked

💡 Hint

Refer to the variable_tracker and execution_table start values for 'color'.

Concept Snapshot

v-model with radio buttons binds a variable to multiple radio inputs.
When a radio button is clicked, v-model updates the variable to that button's value.
Only one radio button in the group can be selected at a time.
The UI updates reactively to show the selected value.
Use the same v-model on all radios in the group.
Labels improve accessibility and usability.

Full Transcript

This visual execution shows how Vue's v-model works with radio buttons. Initially, the variable 'color' is set to 'red', so the red radio button is selected and the text shows 'Selected color: red'. When the user clicks the blue radio button, v-model updates 'color' to 'blue', triggering a re-render that updates the displayed text and selects the blue radio button. Clicking back to red changes 'color' again, updating the UI accordingly. Only one radio button can be selected at a time because they share the same v-model variable. This example demonstrates the reactive binding and UI synchronization that v-model provides for radio button groups.