Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.
In this article, we’ll look at how to create a loan calculator app with Vue 3 and JavaScript.
Create the Project
We can create the Vue project with Vue CLI.
To install it, we run:
npm install -g @vue/cli
with NPM or:
yarn global add @vue/cli
with Yarn.
Then we run:
vue create loan-calculator
and select all the default options to create the project.
Create the Loan Calculator App
We can create our loan calculator app by writing:
<template>
<form @submit.prevent="calculate">
<div>
<label>loan amount</label>
<input v-model.number="loanAmount" />
</div>
<div>
<label>interest rate</label>
<input v-model.number="interestRate" />
</div>
<div>
<label>number of months to pay off loan</label>
<input v-model.number="numMonths" />
</div>
<button type="submit">calculate monthly payment</button>
</form>
<p>monthly payment: {{ monthlyPayment.toFixed(2) }}</p>
</template>
<script>
export default {
name: "App",
data() {
return {
loanAmount: 0,
interestRate: 0,
numMonths: 0,
monthlyPayment: 0,
};
},
computed: {
formValid() {
const { loanAmount, interestRate, numMonths } = this;
return (
+loanAmount >= 0 &&
0 <= +interestRate &&
+interestRate <= 100 &&
+numMonths > 0
);
},
},
methods: {
calculate() {
if (!this.formValid) {
return;
}
const { loanAmount, interestRate, numMonths } = this;
this.monthlyPayment = (loanAmount * (1 + interestRate / 100)) / numMonths;
},
},
};
</script>
We create a form with the loan amount, interest rate, and the number of months to pay off loan fields.
They all bind to a reactive with the v-model directive.
And they all have the number modifier to automatically convert the inputted value to a number.
We also have the submit button to let us trigger the submit event to run the calculate method.
prevent lets us prevent the default server-side submission behavior.
The data method returns an object with the reactive properties and their initial values.
We also have the formValid computed property to return the condition where the form is valid.
loanAmount must be 0 or larger.
interestRate must be between 0 and 100.
And numMonths must be bigger than 0.
We use the + sign to let us convert them to numbers easily.
And the calculate method checks the formValid computed property to see if the form is valid.
And then makes the calculation for the monthly payment with the last line of the method.
In the template, we display the monthly payment rounded to 2 decimal places.
The toFixed method does the rounding and returns the string form of the value.
Conclusion
We can create a loan calculator with Vue 3 and JavaScript.
