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()
this.$global.round
y retornando directamente el valor?