Update changes to loan details in parent component

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 {

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() {