Snippet

Mapping User Role Badges with Array Map in Vue

The Array.prototype.map() method creates a new array populated with the results of calling a provided function on every element in the calling array. Inside Vue's computed property, map() transforms each lowercase string in the reactive array into uppercase without mutating the original list.

snippet.js

javascript

import { ref, computed } from 'vue';
 
export default {
  setup() {
    const roles = ref(['admin', 'editor', 'viewer']);
    const uppercaseRoles = computed(() => {
      return roles.value.map(role => role.toUpperCase());
    });
 
    return { roles, uppercaseRoles };
  }
};

vue

Breakdown

const roles = ref(['admin', 'editor', 'viewer']);

Initializes a reactive reference containing an array of string values representing user roles.

const uppercaseRoles = computed(() => {

Declares a computed property that automatically re-evaluates when the reactive roles array changes.

return roles.value.map(role => role.toUpperCase());

Uses the map array method to iterate over each role and transform it into an uppercase string.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Mapping User Role Badges with Array Map in Vue

Related