Tengo este componente que muestra el resumen de una venta pero ahora tengo que hacer que el componente sea genérico o sea este componente debe recibir un array de objetos.
mi componente actual:
<template>
<div class="container-fluid d-flex justify-content-center">
<div class="row col-lg-6 d-flex justify-content-center">
<table class="table col-sm-4">
<thead>
<tr>
<th>Subtotal</th>
<td class="table-light">{{ subtotal | currency }}</td>
</tr>
<tr>
<th>Descuento</th>
<td class="table-light">{{ discount | currency }}</td>
</tr>
<tr>
<th>Envío</th>
<td class="table-light">{{ shipping | currency }}</td>
</tr>
<tr>
<th>Impuesto</th>
<td class="table-light">{{ taxes | currency }}</td>
</tr>
<tr>
<th>TOTAL</th>
<th class="total">{{ total | currency }}</th>
</tr>
</thead>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'w-purchase-summary-table',
props: {
subtotal: Number,
discount: Number,
shipping: Number,
taxes: Number,
total: Number
}
}
</script>
<style lang="scss">
</style>
Tiene que recibir un array para que no sea solo para ventas sino este tipo de componente pero general para poder utilizar en otras pantallas.
Entonces:
Como convertir correctamente mi componente en uno generico que tome datos que reciba de un array?