卡在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>

Vue：

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, ",");
        }
      }
    });