Mi problemita es con vue.js ... Tengo un array de abastecimientos que contiene principalmente litros, cantidad despachada y un campo "propuesta" que el sistema ha calculado previamente, pero el usuario puede modificar y tengo que validar dicho valor (no se puede despachar mas de la cantidad total ingresada en otro campo de texto ni se puede despachar mas de lo disponible en cada fila) .
ejemplo:
si la cantidad total que quiero despachar es de 50.000 el sistema propone lo siguiente, pero el usuario puede modificar esos valores en el v-text-field, pero tengo que validarlos, el problema es que no me resulta el rollback cuando el valor ingresado por el usuario no corresponde.
litros | despachado | disponible | propuesta |
---|---|---|---|
28950 | 0 | 28950 | 28950 |
29190 | 0 | 29190 | 21050 |
26540 | 0 | 26540 | 0 |
ejemplo si el usuario ingresa 5000 en la última columna propuesta, el algoritmo debería volver ese valor a cero, porque 28950 + 21050 ya suman los 50.000 que voy a despachar ... es lo que intento hacer en el método validaPropuesta(), pero el valor del v-text-field no vuelve al asignado en ese método (intenté con el this.$set y asignando directamente al valor item.propuesta) ¿saben que estoy haciendo mal?
<tr v-for="item in abastecimientos" :key="item.id">
<template v-if="item.tk_destino" >
<td><p v-if="item.mostrar == 1">{{item.fecha_mov | formatearFecha}}</p></td>
<td><p v-if="item.mostrar == 1">{{item.mov_litros}}</p></td>
<td><p v-if="item.mostrar == 1">{{item.despachado}}</p></td>
<td><p v-if="item.mostrar == 1">{{ parseInt(item.mov_litros || 0) - parseInt(item.despachado || 0) }}</p></td>
<td :class="`${item.color != 1 ? `propuesta-${item.color}` :''}`">
<v-text-field v-if="item.mostrar == 1" hide-details="auto" class="pt-0 text-right" :value="item.propuesta" @change="validaPropuesta(item,$event)"> </v-text-field>
</td>
<td>{{item.cantidad_exp}}</td>
</template>
</tr>
.
.
.
methods: {
.
.
.
validaPropuesta(item, event) {
let idx = this.abastecimientos.findIndex(r => r.id == item.id)
let lts = 0
this.abastecimientos.forEach(e =>{
lts += parseInt(e.propuesta || 0)
})
let valida1 = (parseInt(this.cantidad_despacho || 0) - lts ) + parseInt(item.propuesta || 0) - parseInt(event|| 0)
let valida2 = parseInt(item.mov_litros || 0) - parseInt(item.despachado || 0) + parseInt(item.propuesta || 0) - parseInt(event|| 0)
let lts2 = Math.min(valida1, valida2)
if (lts2 < 0){
event = parseInt(event || 0) + parseInt(lts2 || 0);
this.$set(this.abastecimientos[idx], "color", 5)
this.$set(this.abastecimientos[idx], "propuesta", event) //opcion 1
item.propuesta = event // opcion 2
} else {
this.$set(this.abastecimientos[idx], "color", 3)
}
}
help me please ;-) ...