Reactive Map and Set in Vue - Mini Project: Build & Apply

Reactive Map and Set

📖 Scenario: You are building a simple Vue app to track a collection of favorite fruits and a set of selected fruits. You want to use Vue's reactive Map and Set to keep the UI updated automatically when the data changes.

🎯 Goal: Create a Vue component that uses reactive Map and Set to store fruit names and their colors, and track which fruits are selected. Display the fruits and highlight the selected ones.

📋 What You'll Learn

Create a reactive Map called fruits with exact entries: 'apple' => 'red', 'banana' => 'yellow', 'grape' => 'purple'

Create a reactive Set called selectedFruits initially empty

Add a method toggleSelection that adds a fruit to selectedFruits if not present, or removes it if already selected

Render a list of fruit names with their colors, and highlight the selected fruits with a CSS class

💡 Why This Matters

🌍 Real World

Reactive Map and Set are useful when you want to track collections of data with unique keys or unique items and have the UI update automatically when these collections change.

💼 Career

Understanding reactive collections in Vue helps you build dynamic interfaces that respond instantly to user actions, a common requirement in modern web development jobs.

1

Create reactive Map with fruits and colors

In the <script setup> section, import reactive from 'vue' and create a reactive Map called fruits with these exact entries: 'apple' => 'red', 'banana' => 'yellow', 'grape' => 'purple'.

Vue

import { reactive } from 'vue'

// Create reactive Map called fruits with given entries
// Your code here



  

Hint

Use reactive(new Map([...])) to create a reactive Map with the given fruit-color pairs.

2

Create reactive Set for selected fruits

Below the fruits Map, create a reactive Set called selectedFruits that starts empty.

Vue

import { reactive } from 'vue'

const fruits = reactive(new Map([
  ['apple', 'red'],
  ['banana', 'yellow'],
  ['grape', 'purple']
]))

// Create reactive Set called selectedFruits empty
// Your code here



  

Hint

Use reactive(new Set()) to create an empty reactive Set.

3

Add toggleSelection method to update selectedFruits

Add a function called toggleSelection that takes a fruit name as argument. If selectedFruits has the fruit, remove it; otherwise, add it.

Vue

import { reactive } from 'vue'

const fruits = reactive(new Map([
  ['apple', 'red'],
  ['banana', 'yellow'],
  ['grape', 'purple']
]))

const selectedFruits = reactive(new Set())

// Add toggleSelection function here
// Your code here



  

Hint

Use selectedFruits.has(fruit) to check presence, then delete or add accordingly.

4

Render fruit list with selection highlight

In the <template>, use v-for to loop over fruits.entries(). Display each fruit name and color. Add a class called selected if the fruit is in selectedFruits. Add a @click event on each fruit to call toggleSelection with the fruit name.

Vue

import { reactive } from 'vue'

const fruits = reactive(new Map([
  ['apple', 'red'],
  ['banana', 'yellow'],
  ['grape', 'purple']
]))

const selectedFruits = reactive(new Set())

function toggleSelection(fruit) {
  if (selectedFruits.has(fruit)) {
    selectedFruits.delete(fruit)
  } else {
    selectedFruits.add(fruit)
  }
}



  
  

Hint

Use v-for with fruits.entries(), bind class with selectedFruits.has(fruit), and add @click to call toggleSelection.

Practice

1. Which Vue function should you use to make a Map reactive so that UI updates when it changes?

easy

A. computed()

B. ref()

C. watch()

D. reactive()

Solution

1. Step 1: Understand Vue reactivity basics

   Vue's reactive() wraps objects like Map or Set to track changes.

2. Step 2: Identify correct function for Map reactivity

   Only reactive() can wrap Map to make it reactive, so UI updates on mutations.

3. Final Answer:

   reactive() -> Option D

4. Quick Check:

   Wrap Map with reactive() = C [OK]

Hint: Use reactive() to wrap Map or Set for reactivity [OK]

Common Mistakes:

• Using ref() which works for primitives, not Map/Set
• Confusing computed() with reactive()
• Trying watch() to make Map reactive

2. Which of the following is the correct syntax to create a reactive Set in Vue?

easy

A. const mySet = reactive(new Set())

B. const mySet = ref(new Set())

C. const mySet = reactive(Set())

D. const mySet = reactive([])

Solution

1. Step 1: Check how to create reactive Set

   You must create a new Set instance and wrap it with reactive().

2. Step 2: Identify correct syntax

   reactive(new Set()) is correct; Set() without new is invalid, and ref() wraps primitives.

3. Final Answer:

   const mySet = reactive(new Set()) -> Option A

4. Quick Check:

   Use new Set() inside reactive() = B [OK]

Hint: Always use new Set() inside reactive() for reactive Sets [OK]

Common Mistakes:

• Omitting new keyword for Set
• Using ref() instead of reactive() for Set
• Wrapping an array instead of Set

3. Given this Vue setup:

const myMap = reactive(new Map());
myMap.set('a', 1);
myMap.set('b', 2);
myMap.delete('a');
console.log([...myMap.keys()]);

What will be logged to the console?

medium

A. ['b']

B. ['a', 'b']

C. []

D. ['a']

Solution

1. Step 1: Track Map mutations

   Initially, keys 'a' and 'b' are added. Then 'a' is deleted.

2. Step 2: Determine final keys

   After deletion, only 'b' remains as a key in the Map.

3. Final Answer:

   ['b'] -> Option A

4. Quick Check:

   Deleted 'a', keys left = ['b'] [OK]

Hint: Deleting a key removes it from Map keys list [OK]

Common Mistakes:

• Forgetting the delete call removes 'a'
• Assuming keys remain unchanged after mutation
• Confusing keys() with values()

4. What is wrong with this Vue code that tries to make a reactive Map?

const myMap = reactive(Map());
myMap.set('key', 'value');

medium

A. reactive() cannot wrap Map

B. Map() must be called with new keyword

C. set() method does not exist on Map

D. Missing ref() wrapper

Solution

1. Step 1: Check Map instantiation syntax

   Map must be created with new Map(), not just Map().

2. Step 2: Identify error cause

   Calling Map() without new causes a TypeError or unexpected behavior.

3. Final Answer:

   Map() must be called with new keyword -> Option B

4. Quick Check:

   Use new Map() to create Map instance [OK]

Hint: Always use new Map() to create Map instances [OK]

Common Mistakes:

• Omitting new keyword for Map
• Thinking reactive() can't wrap Map
• Using ref() instead of reactive()

5. You have a reactive Set in Vue:

const mySet = reactive(new Set(['apple', 'banana']));

// Later in code
mySet.add('banana');
mySet.delete('apple');

const items = [...mySet];

What will be the value of items after these operations?

hard

A. ['apple', 'banana', 'banana']

B. ['banana', 'apple']

C. ['banana']

D. ['apple']

Solution

1. Step 1: Understand Set behavior with duplicates

   Sets only store unique values, so adding 'banana' again does nothing.

2. Step 2: Track mutations

   Initially contains 'apple' and 'banana'. After deleting 'apple', only 'banana' remains.

3. Final Answer:

   ['banana'] -> Option C

4. Quick Check:

   Set keeps unique items, deleted 'apple' = ['banana'] [OK]

Hint: Sets ignore duplicate adds and remove items on delete [OK]

Common Mistakes:

• Assuming duplicates appear in Set
• Forgetting delete removes item
• Confusing Set with Array behavior