Snippet

Formatierung von Preisen in einer Produktliste mit Array Map in Vue

Die Methode Array.prototype.map() transformiert jedes Element in einem Array und gibt ein brandneues Array mit den aktualisierten Werten zurück. Innerhalb einer Vue Computed Property ermöglicht .map() die Erstellung formatierter Darstellungsdaten (wie z. B. Währungsangaben), ohne die ursprünglichen reaktiven Quelldaten zu verändern.

snippet.js

javascript

import { ref, computed } from 'vue';
 
const products = ref([
  { id: 1, name: 'Book', price: 12.5 },
  { id: 2, name: 'Pen', price: 1.99 }
]);
 
const formattedProducts = computed(() => {
  return products.value.map(item => ({
    ...item,
    formattedPrice: `$${item.price.toFixed(2)}`
  }));
});

vue

Erklärung

import { ref, computed } from 'vue';

Importiert die reaktiven Zustandsfunktionen ref und computed aus Vue.

const products = ref([

Deklariert ein reaktives Array mit rohen Produktdaten und numerischen Preisen.

const formattedProducts = computed(() => {

Definiert eine Computed Property, die sich bei Änderungen an products automatisch neu berechnet.

return products.value.map(item => ({

Iteriert mit map über jedes Produkt, um ein neues, transformiertes Objekt zu erstellen.

...item,

Verwendet den Spread-Operator, um bestehende Attribute wie id und name beizubehalten.

formattedPrice: `$${item.price.toFixed(2)}`

Formatiert den numerischen Preis in eine Zeichenkette mit zwei Nachkommastellen und Dollarzeichen.

Vorheriges Snippet Nächstes Snippet

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

Formatierung von Preisen in einer Produktliste mit Array Map in Vue

Verwandt