Virtual scrolling for large lists in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue Composition API function used to create reactive references.

Vue

import { [1] } from 'vue';

Drag options to blanks, or click blank then click option'

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values.

Confusing computed with ref.

The ref function creates a reactive reference to a value, which is essential for reactive state in Vue's Composition API.

2fill in blank

medium

Complete the code to create a reactive variable named 'scrollTop' initialized to 0.

Vue

const scrollTop = [1](0);

Drag options to blanks, or click blank then click option'

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a number.

Trying to use computed for a simple reactive value.

Using ref(0) creates a reactive reference holding the initial scroll position value 0.

3fill in blank

hard

Fix the error in the template to bind the scroll event handler correctly on the container div.

Vue

<div class="list-container" @[1]="onScroll">

Drag options to blanks, or click blank then click option'

Aclick

Bchange

Cinput

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using @click instead of @scroll.

Using @input or @change which do not fire on scrolling.

The @scroll directive listens for scroll events on the container to update the scroll position reactively.

4fill in blank

hard

Fill both blanks to compute the start index of visible items based on scrollTop and itemHeight.

Vue

const startIndex = computed(() => Math.floor(scrollTop.value [1] itemHeight.value));

Drag options to blanks, or click blank then click option'

A+

B*

C/

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using multiplication instead of division.

Using addition or subtraction which do not calculate index correctly.

Dividing the scrollTop by itemHeight gives the index of the first visible item in the list.

5fill in blank

hard

Fill all three blanks to create a style object that sets the container height and translateY for the visible list.

Vue

const containerStyle = computed(() => ({ height: `${totalItems.value [1] itemHeight.value}px`, transform: `translateY(${startIndex.value [2] itemHeight.value}px)` }));

Drag options to blanks, or click blank then click option'

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition for height calculation.

Using division or subtraction incorrectly in translateY.

The container height is total items times item height. The translateY moves the visible items down by startIndex times itemHeight.