0

Estoy intentando hacer una App para calcular los salarios en mi país El Salvador usando VUE-CLI, estoy usando el siguiente código en el componente (Incluye todo el HTML, JavaScript):

Lo que hace es que se va escribiendo el salario en una caja de texto y a través de propiedades computadas voy haciendo que los descuentos cambien en tiempo real.

<template>
  <div>
    <v-container>
      <v-text-field label="Ingresa tu salario" v-model="salario" type="number"></v-text-field>
      <br />
      <div>
        <b>AFP:</b>
        ${{ afp }}
      </div>
      <br />
      <div>
        <b>ISSS:</b>
        ${{ isss }}
      </div>
      <br />
      <div>
        <b>Salario - ISSS - AFP:</b>
        ${{ salariodescuento }}
      </div>
      <br />
      <div>
        <b>Renta (Cuota fija):</b>
        <template v-if="renta == 0">No paga renta</template>
        <template v-else>${{ renta }}</template>
      </div>
    </v-container>
  </div>
</template>

<script>
export default {
  name: "Salario",
  data() {
    return {
      salario: 0,
      CF1: 17.67,
      CF2: 60.0,
      CF3: 288.57,
      EXC1: 472.01,
      EXC2: 895.25,
      EXC3: 2038.11
    };
  },
  computed: {
    afp() {
      let tmp;
      if (this.salariodescuento >= 6377.15) {
        tmp = 398.57;
      } else {
        tmp = this.salario * 0.0725;
      }
      return this.$global.round(tmp);
    },
    isss() {
      let tmp;
      if (this.salariodescuento + this.afp >= 1000) {
        tmp = 30;
      } else {
        tmp = this.salario * 0.03;
      }
      return this.$global.round(tmp);
    },
    salariodescuento() {
      return this.$global.round(this.salario - this.isss - this.afp);
    },
    renta() {
      let tmp;
      if (this.salariodescuento < this.EXC1) {
        tmp = 0;
      } else if (
        this.salariodescuento >= this.EXC1 &&
        this.salariodescuento < this.salariodescuento < this.EXC2
      ) {
        tmp = (this.salariodescuento - this.EXC1) * 0.1 + this.CF1;
      } else if (
        this.salariodescuento >= this.EXC2 &&
        this.salariodescuento < this.EXC3
      ) {
        tmp = (this.salariodescuento - this.EXC2) * 0.2 + this.CF2;
      } else if (this.salariodescuento >= this.EXC3) {
        tmp = (this.salariodescuento - this.EXC3) * 0.3 + this.CF3;
      } else {
        tmp = 0;
      }
      return this.$global.round(tmp);
    }
  }
};
</script>

Y recibo el siguiente error:

[Vue warn]: Error in render: "RangeError: Maximum call stack size exceeded"

found in

---> <Salario> at src/views/Salario.vue
       <App> at src/App.vue
         <Root>

vue.runtime.esm.js?2b0e:1888 RangeError: Maximum call stack size exceeded
    at Watcher.cleanupDeps (vue.runtime.esm.js?2b0e:4520)
    at Watcher.get (vue.runtime.esm.js?2b0e:4493)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at VueComponent.computedGetter [as salariodescuento] (vue.runtime.esm.js?2b0e:4836)
    at VueComponent.isss (Salario.vue?f8d6:56)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at VueComponent.computedGetter [as isss] (vue.runtime.esm.js?2b0e:4836)
    at VueComponent.salariodescuento (Salario.vue?f8d6:64)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)

No tengo idea de que podría estar pasando, parece que no tengo un error de sintaxis. He pensado que el error ha sido producido porque he llamado muchas veces las propiedades computadas entre ellas, pero en caso de ser así como podría optimizar mi código, tal vez si alguien pudiera proporcionarme una manera para hacerlo a tráves de data()

1
  • El error está asociado generalmente al llamado recursivo de funciones, puedes probar eliminando this.$global.round y retornando directamente el valor? Commented el 12 jul. 2020 a las 2:07

2 respuestas 2

1

El problema es que tienes dependencias circulares, recuerda que los computed se ejecutan cada vez que una de las dependencias cambia y lo que pasa acá es que por ejemplo cada vez que se actualiza el valor de afp se actualiza el de salarioDescuento y si este se modifica, modifica afp y asi sucesivamente va a existir un ciclo interminable. Lo que debes hacer es establecer una lógica que rompa esa dependencia circular.

0

Como indicaba Daniel Rodríguez Meza tenia una dependencia circular que la arregle valiéndome del uso de Watch y cambiando propiedades computadas a la data del componente, buscando la manera de eliminar AFP e ISSS de las propiedades computadas y calcularlas solo cuando el observador note un cambio en el salario, dejo el código:

<script>
export default {
  name: "Salario",
  data() {
    return {
      salario: 0,
      CF1: 17.67,
      CF2: 60.0,
      CF3: 288.57,
      EXC1: 472.01,
      EXC2: 895.25,
      EXC3: 2038.11,
      afp: 0,
      isss: 0,
      quincenal: 0,
      mensual: 0
    };
  },
  computed: {
    salariodescuento() {
      return this.$global.round(this.salario - this.isss - this.afp);
    },
    renta() {
      let tmp;
      if (this.salariodescuento < this.EXC1) {
        tmp = 0;
      } else if (
        this.salariodescuento >= this.EXC1 &&
        this.salariodescuento < this.salariodescuento < this.EXC2
      ) {
        tmp = (this.salariodescuento - this.EXC1) * 0.1 + this.CF1;
      } else if (
        this.salariodescuento >= this.EXC2 &&
        this.salariodescuento < this.EXC3
      ) {
        tmp = (this.salariodescuento - this.EXC2) * 0.2 + this.CF2;
      } else if (this.salariodescuento >= this.EXC3) {
        tmp = (this.salariodescuento - this.EXC3) * 0.3 + this.CF3;
      } else {
        tmp = 0;
      }
      return this.$global.round(tmp);
    }
  },
  watch: {
    salario() {
      //Calcular AFP
      let tmpAfp;
      if (this.salariodescuento >= 6377.15) {
        tmpAfp = 398.57;
      } else {
        tmpAfp = this.salario * 0.0725;
      }
      this.afp = this.$global.round(tmpAfp);
      //Calcular ISSS
      let tmpIsss;
      if (this.salariodescuento + this.afp >= 1000) {
        tmpIsss = 30;
      } else {
        tmpIsss = this.salario * 0.03;
      }
      this.isss = this.$global.round(tmpIsss);

      //Calcular total a pagar
      this.mensual = this.$global.round(this.salario - this.isss - this.afp - this.renta);
      this.quincenal = this.$global.round(this.mensual / 2);
    }
  }
};
</script>

Tu Respuesta

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

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