diff --git a/components/new/details.vue b/components/new/details.vue
index 38a87b1..65d36ba 100644
--- a/components/new/details.vue
+++ b/components/new/details.vue
@@ -91,46 +91,49 @@
<h3>Loan Details</h3>
<label>Loan Term (years)</label>
<input :value="loans[sel].term"
-@input="(e) => loans[sel].term = strip(e)">
+@input="(e) => $emit('update:term', stripInt(e))">
<label>Loan Program</label>
-<select id="" name="" v-model="loans[sel].program">
+<select id="" name=""
+ :value="loans[sel].program"
+ @change="(e) => $emit('update:program', e.target.value)">
<option value="none">None</option>
</select>
<label>Loan to Value (%)</label>
-<input :value="loans[sel].ltv" @input="setLtv">
+<input :value="loans[sel].ltv" @input="(e) => $emit('update:ltv', e)">
<label>Loan Amount ($)</label>
<input :value="loans[sel].amount"
-@input="setAmount">
+@input="(e) => $emit('update:amount', e)">
<label>Housing Expense DTI (%) - Optional</label>
-<input :value="loans[sel].housingDti" @input="setHousingDti">
+<input :value="loans[sel].housingDti"
+@input="(e) => $emit('update:houstingDti', e)">
<label>Total DTI (%) - Optional</label>
-<input :value="loans[sel].dti" @input="setDti">
+<input :value="loans[sel].dti" @input="(e) => $emit('update:dti', strip(e))">
<label>Home Owner's Association ($/month)</label>
<input :value="loans[sel].hoa"
-@input="(e) => { loans[sel].hoa = strip(e) }">
+@input="(e) => { $emit('update:hoa', strip(e)) }">
<label>Interest Rate (%)</label>
<input :value="loans[sel].interest"
-@input="(e) => { loans[sel].interest = stripPerc(e) }">
+@input="(e) => { $emit('update:interest', stripPerc(e)) }">
<label>Days of Interest</label>
<input :value="loans[sel].interestDays"
-@input="(e) => {loans[sel].interestDays = stripInt(e)}">
+@input="(e) => $emit('update:interestDays', stripInt(e))">
<label>Hazard Insurance Escrow (months)</label>
<input :value="loans[sel].hazardEscrow"
-@input="(e) => {loans[sel].hazardEscrow = stripInt(e)}">
+@input="(e) => { $emit('update:hazardEscrow', stripInt(e)) }">
<label>Hazard Insurance ($/month)</label>
<input :value="loans[sel].hazard"
-@input="(e) => {loans[sel].hazard = strip(e)}">
+@input="(e) => $emit('update:hazard', strip(e))">
<label>Real Estate Tax Escrow (months)</label>
<input :value="loans[sel].taxEscrow"
@input="e => {loans[sel].taxEscrow = stripInt(e)}">
<label>Real Estate Tax ($/month)</label>
<input :value="loans[sel].tax"
-@input="(e) => {loans[sel].tax = strip(e)}">
+@input="(e) => $emit('update:tax', strip(e))">
</section>
<section class="form inputs">
@@ -197,56 +200,6 @@ function addFee(fee, isDebit) {
}
-// Changes loan.ltv's <input> and data() values, then syncs with data.amount
-function setLtv(e) {
- let ltv = strip(e)
- let loan = this.loans[this.sel]
- if (!this.estimate.price) return
-
- if (ltv > 100) ltv = 100
- if (ltv < 0) ltv = 0
-
- loan.ltv = ltv
- loan.amount = (ltv / 100 * this.estimate.price).toFixed(2)
-}
-
-// Changes loan.amount\'s <input> and data() values, then syncs with data.ltv
-function setAmount(e) {
- let amount = strip(e)
- let loan = this.loans[this.sel]
- if (!this.estimate.price) return
-
- if (amount > loan.price) amount = loan.price
- if (amount < 0) amount = 0
-
- loan.amount = amount
- loan.ltv = (amount / this.estimate.price * 100).toFixed(2)
-}
-
-function setDti(e) {
- let dti = strip(e)
- let loan = this.loans[this.sel]
- if (!loan.price) return
-
- if (dti > 100) dti = 100
- if (dti < 0) dti = 0
-
- e.target.value = dti
- loan.dti = dti
-}
-
-function setHousingDti(e) {
- let housingDti = strip(e)
- let loan = this.loans[this.sel]
- if (!loan.price) return
-
- if (housingDti > 100) housingDti = 100
- if (housingDti < 0) housingDti = 0
-
- e.target.value = housingDti
- loan.housingDti = housingDti
-}
-
function validate() {
let errors = []
const estimate = this.estimate
@@ -287,8 +240,7 @@ function validate() {
export default {
components: { FeeDialog },
methods: {
- setLtv, setAmount, setDti, setHousingDti, strip, stripInt,
- stripLetters, stripPerc, createFee, addFee, validate
+ strip, stripInt, stripLetters, stripPerc, createFee, addFee, validate
},
props: ['estimate', 'loans', 'sel'],
// Loan updates assume the currently selected loan is being modified, and
@@ -303,10 +255,15 @@ export default {
'update:price',
'update:propertyType',
+ // Loan specific emits
'update:loanType',
- 'update:loanTerm',
- 'update:loanProgram',
+ 'update:term',
+ 'update:program',
'update:ltv',
+ 'update:amount',
+ 'update:housingDti',
+ 'update:dti',
+ 'update:hoa',
],
data() {
return {
diff --git a/components/new/new.vue b/components/new/new.vue
index 618f2ba..a42a511 100644
--- a/components/new/new.vue
+++ b/components/new/new.vue
@@ -31,9 +31,17 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
@update:creditScore="(c) => estimate.creditScore = c"
@update:mIncome="(m) => estimate.mIncome = m"
@update:transaction="(t) => estimate.transaction = t"
+ @update:price="(p) => estimate.price = p"
@update:property="(p) => estimate.property = p"
@update:loanType="(lt) => loans[sel].type = lt"
+ @update:term="(lt) => loans[sel].term = lt"
+ @update:program="(p) => loans[sel].program = p"
+ @update:ltv="setLtv"
+ @update:amount="setAmount"
+ @update:housingDti="setHousingDti"
+ @update:dti="setDti"
+ @update:hoa="(hoa) => loans[sel].hoa = hoa"
/>
<summary v-if="hash == '#new/summary'"/>
@@ -41,6 +49,7 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
</template>
<script>
+import { stripLetters, strip, stripInt, stripPerc } from "../../helpers.js"
import LoanDetails from "./details.vue"
import Summary from "./summary.vue"
@@ -116,6 +125,57 @@ function setPrice(value) {
})
}
+
+// Changes loan.ltv's <input> and data() values, then syncs with data.amount
+function setLtv(e) {
+ let ltv = strip(e)
+ let loan = this.loans[this.sel]
+ if (!this.estimate.price) return
+
+ if (ltv > 100) ltv = 100
+ if (ltv < 0) ltv = 0
+
+ loan.ltv = ltv
+ loan.amount = (ltv / 100 * this.estimate.price).toFixed(2)
+}
+
+// Changes loan.amount\'s <input> and data() values, then syncs with data.ltv
+function setAmount(e) {
+ let amount = strip(e)
+ let loan = this.loans[this.sel]
+ if (!this.estimate.price) return
+
+ if (amount > loan.price) amount = loan.price
+ if (amount < 0) amount = 0
+
+ loan.amount = amount
+ loan.ltv = (amount / this.estimate.price * 100).toFixed(2)
+}
+
+function setDti(e) {
+ let dti = strip(e)
+ let loan = this.loans[this.sel]
+ if (!loan.price) return
+
+ if (dti > 100) dti = 100
+ if (dti < 0) dti = 0
+
+ e.target.value = dti
+ loan.dti = dti
+}
+
+function setHousingDti(e) {
+ let housingDti = strip(e)
+ let loan = this.loans[this.sel]
+ if (!loan.price) return
+
+ if (housingDti > 100) housingDti = 100
+ if (housingDti < 0) housingDti = 0
+
+ e.target.value = housingDti
+ loan.housingDti = housingDti
+}
+
function generate() {
this.errors = this.validate()
if (this.errors.length) return
@@ -139,7 +199,8 @@ function generate() {
export default {
components: { Summary, LoanDetails },
methods: {
- generate, createFees, del, create, setPrice
+ generate, createFees, del, create, setPrice, setLtv, setAmount,
+ setDti, setHousingDti
},
props: ['user', 'fees'],
data() {