UnivateProperties/src/components/misc/bondCaclculator.vue

<template>
  <div>
    <h2 id="modal-bondcal">Bond Calculator</h2>
    <p>Calculate the value of the property you could buy</p>
    <currency-input
      onClick="this.setSelectionRange(0, this.value.length)"
      name="price"
      :value="value"
      @input="value = $event"
      v-model="amount"
      id="gross-income"
      class="form-control mb-2"
    />
    <currency-input
      onClick="this.setSelectionRange(0, this.value.length)"
      name="deposit"
      :value="value"
      @input="value = $event"
      v-model="deposit"
      id="gross-income"
      class="form-control mb-2"
    />
    <div class="slidecontainer mt-4">
      <input type="range" min="5" max="30" value="10" class="slider" id="myRange" v-model="term" />
    </div>
    <p>{{ term }} Years</p>
    <input
      type="text"
      class="form-control mb-2"
      name="interest"
      id="interest"
      placeholder="Interest Rate (Percent)"
      v-model="rate"
    />
    <!-- <button @click="calculate()" class="btn-solid-blue scrollto">CALCULATE</button> -->
    <div class="container p-0 mt-5">
      <div class="row">
        <div class="col-md-7">
          Monthly Repayment
        </div>
        <div class="col-md-5">
          <strong>{{ totalMonthlyPayment | toCurrency }}</strong>
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-md-7">
          Gross Montly Income
        </div>
        <div class="col-md-5">
          <strong>{{ grossIncome | toCurrency }}</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      amount: 1000000,
      deposit: 0,
      term: 10,
      rate: 7,
      isInputActive: false
    };
  },
  props: ["value"],
  methods: {
    calculate() {
      var rate = this.rate / 100 / 12;
      var years = this.term * 12;
      var topPart = rate * Math.pow(1 + rate, years);
      var bottomPart = Math.pow(1 + rate, years) - 1;
      var netAmnt = this.amount - this.deposit;
      var bond = (netAmnt * topPart) / bottomPart;
    }
  },
  computed: {
    totalMonthlyPayment() {
      var rate = this.rate / 100 / 12;
      var years = this.term * 12;
      var topPart = rate * Math.pow(1 + rate, years);
      var bottomPart = Math.pow(1 + rate, years) - 1;

      var netAmnt = this.amount - this.deposit;

      var bond = (netAmnt * topPart) / bottomPart;
      if (isNaN(bond)) {
        return 0;
      } else {
        return bond;
      }
    },
    grossIncome() {
      return this.totalMonthlyPayment * 3.335120643;
    }
  }
};
</script>

<style lang="scss" scoped></style>