v-model with radio buttons in Vue - Mini Project: Build & Apply

Binding Radio Buttons with v-model in Vue

📖 Scenario: You are building a simple survey form in Vue where users select their favorite fruit using radio buttons.

🎯 Goal: Create a Vue component that uses v-model to bind a group of radio buttons to a data property. The selected fruit should update reactively.

📋 What You'll Learn

Create a reactive data property called favoriteFruit with an initial empty string.

Add a configuration variable fruits as an array of fruit names.

Use v-for to render radio buttons for each fruit with v-model bound to favoriteFruit.

Add a paragraph below the radio buttons that shows the selected fruit dynamically.

💡 Why This Matters

🌍 Real World

Forms often require users to select one option from many, such as choosing preferences or survey answers. Binding radio buttons with v-model makes this easy and reactive.

💼 Career

Understanding how to bind form inputs in Vue is essential for frontend developers building interactive user interfaces.

1

Setup the Vue component and data property

Create a Vue component with a reactive data property called favoriteFruit initialized to an empty string ''.

Vue

  
  



// Create a reactive variable called favoriteFruit and set it to an empty string

Need a hint?

Use ref from Vue to create a reactive variable.

2

Add the fruits array

Add a constant array called fruits with these exact values: 'Apple', 'Banana', 'Cherry'.

Vue

  
  



import { ref } from 'vue'

const favoriteFruit = ref('')
// Add a constant array fruits with 'Apple', 'Banana', 'Cherry'

Need a hint?

Use const fruits = ['Apple', 'Banana', 'Cherry'] to create the array.

3

Render radio buttons with v-model

Inside the <div>, use v-for to create a radio button for each fruit in fruits. Bind each radio button's v-model to favoriteFruit. Set the value attribute of each radio button to the fruit name.

Vue

  
    
  



import { ref } from 'vue'

const favoriteFruit = ref('')
const fruits = ['Apple', 'Banana', 'Cherry']

Need a hint?

Use v-for="fruit in fruits" on a <label> and bind v-model on the <input type="radio">.

4

Show the selected fruit

Below the radio buttons, add a paragraph that displays the text Your favorite fruit is: followed by the reactive variable favoriteFruit using Vue's interpolation syntax.

Vue

  
    
       {{ fruit }}
    
    
  



import { ref } from 'vue'

const favoriteFruit = ref('')
const fruits = ['Apple', 'Banana', 'Cherry']

Need a hint?

Use {{ favoriteFruit }} inside a paragraph to show the selected fruit.