I've recently delved into learning Vue and decided to create a small application for adding fractions together. I have developed two main components: Fraction.vue and App.vue. The App.vue component contains multiple instances of the Fraction component.
Here is the code for Fraction.vue:
export default {
data() {
return {
numerator: 0,
denominator: 1
};
},
computed: {
result() {
return (this.numerator / this.denominator).toFixed(2);
}
}
};
And here is the code for App.vue:
<template>
<div class="content">
<div class="fractions">
<Fraction v-for="fraction in fractions" :key="fraction">
<span v-if="fractions.indexOf(fraction) === fractions.length - 1">
=
</span>
<span v-else>+</span>
</Fraction>
<div class="result">
<span>{{ result }}</span>
</div>
</div>
<div class="add-fraction">
<button @click="addFraction">Add fraction</button>
</div>
</div>
</template>
<script>
import Fraction from "./Fraction";
export default {
components: {
Fraction: Fraction
},
data() {
return {
fractions: [1, 2]
};
},
methods: {
addFraction() {
if (this.fractions.length !== 5) {
this.fractions.push(this.getRandomInt(1, 100));
} else {
alert("The maximum number of fractions in the expression is 5.");
}
},
getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
},
computed: {
result() {
return 213;
}
}
};
</script>
I'm struggling with obtaining the final result of the equation.