Buenas que tal? Gracias por tomarse un momento para leer mi consulta.
Tecnologias y frameworks que estoy usando: Javascript
, Vue.JS
, QUASAR.dev
Mi problema es el siguiente:
Tengo un table que carga desde un array de productos. Debajo, un bloque que devuelve la suma de la propiedad "total_precio" para cada uno de estos productos. tal cual sería una caja registradora.
Cuando la web carga por primera vez mi función computada "totalCaja" me devuelve la suma total de los artículos en el <table></table>
sin problema alguno. pero cuando cambio el valor del "precio total" una vez que ya cargo la vista. el bloque en vez de actualizarme el valor total correspondiente a la suma de la propiedad "total_caja" para todos los objetos, me devuelve "0.00". por consola no recibo error alguno.
fragmento de INDEX.VUE (template) y Fragmento del <script></script>
index.vue
<script>
export default {
name: 'PageIndex',
data() {
return {
columns: [
{
name: 'name',
required: true,
label: 'Nombre de producto/Servicio',
align: 'left',
field: 'name',
sortable: true
},
{
name: 'Precio_Total',
required: true,
label: 'Nombre de producto/Servicio',
align: 'left',
field: Precio_Total,
sortable: true
}
],
data: [
{
name: 'Chocolate',
Precio_Total: 17
}
]
}
},
computed: {
totalCaja() {
let total_caja = parseFloat(this.data.reduce((sum, value) => (typeof value.Precio_Total == "number" ? sum + value.Precio_Total : sum), 0)).toFixed(2);
return total_caja
}
}
}
</script>
<link href="https://cdn.jsdelivr.net/npm/quasar@1.15.11/dist/quasar.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.15.11/dist/quasar.umd.min.js"></script>
<template>
<q-table class="my-sticky-header-table"
color="primary"
style="height:200%;"
title="Detalle de productos/Servicios"
dense
:data="data"
:columns="columns"
row-key="name"
flat
bordered
hide-bottom>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="name" :props="props">
{{ props.row.name }}
<q-popup-edit v-model="props.row.name" title="Editar Nombre">
<q-input v-model="props.row.name" dense autofocus counter />
</q-popup-edit>
</q-td>
</q-tr>
</template>
</q-table>
<div v-text="totalCaja"></div>
</template>
Aguardo sus comentarios, gracias