Застрял в расчете сложной инфляции для калькулятора VueJS

Question

Я строю базовый калькулятор, который вычисляет стоимость обучения в колледже для будущего студента. Он учитывает, сколько лет до колледжа, сколько времени студент ожидает в колледже, годовую стоимость колледжа и уровень инфляции. Попытка выяснить, как вычислить это, разрушает мой мозг. В основном, он должен корректироваться с учетом инфляции каждый год, например, если плата за обучение составляет 20 000 долларов США, уровень инфляции составляет 5%, а продолжительность обучения в колледже составляет 4 года, то это будет 21 000 долларов США (20 000 долларов США + 5%), 22 050 долларов США (21 000 долларов США + 5%), 23 152,50 доллара США (22 050 долларов США + 5%) и скоро. Сложно задать вопрос «Сколько лет до колледжа». Например, если пользователь выбирает 2, ему необходимо рассчитать инфляцию за эти 2 года и продолжить адаптацию к тому, сколько лет в колледже выбрано. Любая помощь о том, как справиться с этим будет принята с благодарностью. Я подумал, что мог бы использовать какой-то цикл for, но я не уверен. Спасибо!

https://codepen.io/admrbsn/pen/WWgNWy

HTML:

<div id="app">
  <div class="container">
        <div class="row">
            <div class="col-md-8 pr-lg-6">
                <!-- How many years until college? -->
                <div class="form-group mb-4">
                    <label for="yearsUntilCollege">How many years until college?</label>
                    <select v-model="cost.yearsUntil" class="custom-select" id="yearsUntilCollege" aria-describedby="yearsUntilCollege">
                        <option v-for="n in 20" :value="n">{{n}} years</option>
                    </select>
                </div>

                <!-- What's the annual college cost? -->
                <div class="form-group mb-4">
                    <label>What's the annual college cost?</label>
                    <div class="row position-relative'">

                        <!-- Select -->
                        <div :class="['col-md-6 pl-md-4', { 'disabled': cost.averageCostInput > 0 }]">
                            <select v-model="cost.averageCostSelect" class="custom-select" id="averageCollegeCostSelect" aria-describedby="averageCollegeCostSelect">
                                <option value="">Select an average cost</option>
                                <option v-for="amount in amounts" v-bind:value="amount.value">
                                {{ amount.text }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- What's the college cost inflation rate? -->
                <div class="form-group mb-4">
                    <label for="collegeInflationRate" class="d-flex align-items-center">What's the college cost inflation rate?</label>
                    <select v-model="cost.inflationRate" class="custom-select" id="collegeInflationRate" aria-describedby="collegeInflationRate">
                        <option v-for="n in 10" :value="n">{{n}}%</option>
                    </select>
                </div>

                <!-- How many years do you expect to attend college? -->
                <div class="form-group mb-4">
                    <label for="numberOfYears" class="d-flex align-items-center">How many years do you expect to attend college?</label>
                    <select v-model="cost.yearsAttend" class="custom-select" id="numberOfYears" aria-describedby="numberOfYears">
                        <option v-for="n in 10" :value="n">{{n}} years</option>
                    </select>
                </div>

                <!-- Submit button -->
                <button v-on:click="calc" type="button" class="btn btn-primary btn-lg btn-block">Calculate my cost</button>
            </div><!-- end .col-md-8 -->
        </div>

        ${{ formatPrice(cost.totalCost) }}

    </div><!-- end .container -->
</div>

Вю:

var app = new Vue({
      el: '#app',
      data() {
        return {
          // Cost variables
          cost: {
            yearsUntil: 2,
            inflationRate: 5,
            yearsAttend: 4,
            averageCostSelect: '',
            totalCost: '',
          },

          // Pre-defined annual college cost amounts (for average college cost select)
          amounts: [
            { text: '4-year private: $42,224', value: 42224 },
            { text: '4-year public (in-state): $21,447', value: 21447 },
            { text: '4-year public (out-of-state): $33,973', value: 33973 },
            { text: '2-year public: $15,286', value: 15286 },
            { text: '2-year private: $28,155', value: 28155 }
          ],
        }
      },

      methods: {
        // The magic happens here
        calc: function() {
          this.cost.totalCost = (this.cost.averageCostSelect + (this.cost.averageCostSelect * (this.cost.inflationRate / 100))) * this.cost.yearsAttend;
        },

        // Format numbers
        formatPrice(value) {
          let val = (value/1).toFixed(2);
          return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
      }
    });