0

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 ;-) ...

1
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! la pregunta venia bien.. y falto decir cual es el problema?
    – gbianchi
    el 30 ago. 2022 a las 16:06

1 respuesta 1

0

El error estaba en el v-text-field .. no me di cuenta que escribí :value y debe ir v-model

dice:

<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>

debe decir:

<v-text-field v-if="item.mostrar == 1" hide-details="auto" class="pt-0 text-right" v-model="item.propuesta" @change="validaPropuesta(item,$event)"> </v-text-field>

y en la función ... donde dice //opcion 1 //opcion 2 ... basta dejar la //opcion 1 ...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.