Snippet

Zuordnen von Benutzer-Rollen-Badges mit Array Map in Vue

Die Methode Array.prototype.map() erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element des Ausgangs-Arrays. Innerhalb einer Computed-Property in Vue wandelt map() jeden kleingeschriebenen String in Großbuchstaben um, ohne das ursprüngliche reaktive Array zu verändern.

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

Erklärung

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

Initialisiert eine reaktive Referenz mit einem Array von Strings, die Benutzerrollen darstellen.

const uppercaseRoles = computed(() => {

Deklariert eine berechnete Eigenschaft (computed), die sich bei Änderungen des Arrays automatisch aktualisiert.

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

Verwendet die map-Array-Methode, um jede Rolle zu durchlaufen und in Großbuchstaben umzuwandeln.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Zuordnen von Benutzer-Rollen-Badges mit Array Map in Vue

Verwandt