Need some assistance from the Vue experts out there. I am diving into Vue as a beginner and trying to create a simple calculator.
The issue at hand is having three input forms where two values are entered and the third calculates the result.
Ideally, I want all three forms to be blank initially and once data is entered in any two, the calculation should display in the third field. The order of entry shouldn't matter. However, I struggled with this logic and ended up hardcoding the values for now. I need a dynamic solution where any two values will always calculate the correct result in the third field.
Moreover, my current code contains multiple if statements which I know can be optimized for better coding practices. Though it currently works fine, I anticipate it getting lengthy with more if statements added.
new Vue({
el: "#app",
data: {
value1: null,
value2: null
},
computed: {
a_ratio() {
var a_number = parseInt(this.value2) / parseInt(this.value1);
return a_number.toFixed(1);
},
calculation() {
if (this.value1 < 100 && this.value2 > 0) {
var val = parseInt(this.value2) / 10 || 0;
return val.toFixed(1);
}
if (this.value1 >= 100 && this.value2 > 0) {
var val = parseInt(this.value2) / 20 || 0;
return val.toFixed(1);
}
}
}
});