javascript / beginner
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
1
2
3
4
5
6
7
8
9
10
11
12
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
1
const roles = ref(['admin', 'editor', 'viewer']);
Initialisiert eine reaktive Referenz mit einem Array von Strings, die Benutzerrollen darstellen.
2
const uppercaseRoles = computed(() => {
Deklariert eine berechnete Eigenschaft (computed), die sich bei Änderungen des Arrays automatisch aktualisiert.
3
return roles.value.map(role => role.toUpperCase());
Verwendet die map-Array-Methode, um jede Rolle zu durchlaufen und in Großbuchstaben umzuwandeln.