v-model with select dropdowns in Vue - Mini Project: Build & Apply

Binding Select Dropdowns with v-model in Vue

📖 Scenario: You are building a simple form in Vue where users can choose their favorite fruit from a dropdown list.

🎯 Goal: Create a Vue component that uses v-model to bind the selected fruit from a dropdown menu to a data variable.

📋 What You'll Learn

Create a Vue component with a data variable called selectedFruit initialized to an empty string.

Create a list of fruits as an array called fruits with these exact values: 'Apple', 'Banana', 'Cherry', 'Date'.

Use a <select> element with v-model bound to selectedFruit.

Use <option> elements generated by looping over fruits to show each fruit as a choice.

Display the currently selected fruit below the dropdown.

💡 Why This Matters

🌍 Real World

Dropdown menus are common in forms for selecting options like countries, categories, or preferences. Binding them with v-model keeps the UI and data in sync easily.

💼 Career

Understanding v-model with select elements is essential for building interactive Vue applications and forms, a common task in frontend development jobs.

1

Set up the fruits array

Create a Vue component with a fruits array containing these exact strings: 'Apple', 'Banana', 'Cherry', 'Date'.

Vue

// Create a fruits array with 'Apple', 'Banana', 'Cherry', 'Date'
// Your code here

Need a hint?

Use const fruits = ['Apple', 'Banana', 'Cherry', 'Date'] inside the <script setup> block.

2

Add selectedFruit data variable

Inside the <script setup>, create a ref called selectedFruit and initialize it to an empty string ''.

Vue

const fruits = ['Apple', 'Banana', 'Cherry', 'Date']
// Create a ref called selectedFruit initialized to ''
// Your code here

Need a hint?

Import ref from 'vue' and create const selectedFruit = ref('').

3

Bind select dropdown with v-model

In the <template>, add a <select> element with v-model="selectedFruit". Inside it, use v-for to create <option> elements for each fruit in fruits. Use :key with the fruit name and set the option's value to the fruit.

Vue

import { ref } from 'vue'
const fruits = ['Apple', 'Banana', 'Cherry', 'Date']
const selectedFruit = ref('')

Need a hint?

Use <select v-model="selectedFruit"> and inside it <option v-for="fruit in fruits" :key="fruit" :value="fruit">{{ fruit }}</option>.

4

Display the selected fruit

Below the <select>, add a <p> element that shows the text "Selected fruit: " followed by the value of selectedFruit using mustache syntax.

Vue

import { ref } from 'vue'
const fruits = ['Apple', 'Banana', 'Cherry', 'Date']
const selectedFruit = ref('')



  
    {{ fruit }}
  
  
  

Need a hint?

Use <p>Selected fruit: {{ selectedFruit }}</p> below the select.