Getters for computed store values in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a getter that returns the count of items in the store.

Vue

const store = reactive({ items: ['apple', 'banana', 'cherry'] });
const itemCount = computed(() => store.[1].length);

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

Adata

Bcount

Clist

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name that does not exist in the store.

Trying to get length of the store object itself.

The getter accesses the items array in the store to compute its length.

2fill in blank

medium

Complete the code to create a computed getter that returns items filtered by a minimum length.

Vue

const minLength = 6;
const filteredItems = computed(() => store.items.filter(item => item.length [1] minLength));

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

A<

B==

C>=

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using equality operator instead of comparison.

Using less than operator which filters wrong items.

The getter filters items whose length is greater than or equal to the minimum length.

3fill in blank

hard

Fix the error in the computed getter that returns the uppercase version of the first item.

Vue

const firstItemUpper = computed(() => store.items[0].[1]());

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

AtoUpperCase

BupperCase

CtoLowerCase

Duppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like 'uppercase' or 'upperCase'.

Using toLowerCase instead of toUpperCase.

The correct JavaScript string method to convert to uppercase is toUpperCase().

4fill in blank

hard

Fill both blanks to create a getter that returns a map of items with their lengths, filtering only items longer than 5 characters.

Vue

const itemLengths = computed(() =>
  store.items
    .filter(item => item.length [1] 5)
    .map(item => ({ [2]: item, length: item.length }))
);

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

A>

Bitem

C<

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>' in filter condition.

Using an invalid key name in the map object.

The filter uses '>' to select items longer than 5 characters. The map creates objects with the key 'item' holding the item string.

5fill in blank

hard

Fill all three blanks to create a getter that returns an object mapping uppercase item names to their index, only for items with length less than 7.

Vue

const itemIndexMap = computed(() => {
  return store.items
    .map(([1], [2]) => ({ name: [1].toUpperCase(), index: [2] }))
    .filter(obj => obj.name.length [3] 7)
    .reduce((acc, obj) => {
      acc[obj.name] = obj.index;
      return acc;
    }, {});
});

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

Aitem

Bidx

C<

Di

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect parameter names that don't match usage.

Using '>' instead of '<' in the filter condition.

The map function uses item and i as parameters. The filter keeps names with length less than 7.