skouter/components/new.vue

<template>
<div id="new" class="page">

<h2>New Loan</h2>

<section class="loans-list">

<h3 v-for="(l, indx) in loans"
:class="sel == indx ? 'sel' : ''"
@click="() => sel = indx"
>
{{l.title}}
</h3>

<div class="add">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0
0 1 8 4z"/> </svg>
</div>

</section>

<section class="radios form">
<h3>Transaction Type</h3>
<input type="radio" name="transaction_type" value="transaction"
@input="e => loans[sel].transaction = 0"
selected="loans[sel].transaction == 0">
<label>Purchase</label>
<input type="radio" name="transaction_type" value="refinance"
@input="e => loans[sel].transaction = 1"
selected="loans[sel].transaction == 1">
<label>Refinance</label>
</section>

<section class="form">
<h3>Property Details</h3>
<label>Price ($)</label>
<input :value="loans[sel].price" @input="setPrice">
<label>Type</label>
<select id="" name="" v-model="loans[sel].property">
	<option value="attched">Single Family Attached</option>
	<option value="detached">Single Family Detached</option>
	<option value="lorise">Lo-rise (4 stories or less)</option>
	<option value="hirise">Hi-rise (over 4 stories)</option>
</select>
<label></label>
</section>

<section class="radios form">
<h3>Loan Type</h3>
<input type="radio" name="loan_type" value="conv" v-model="loans[sel].type"
>
<label>Conventional</label>
<input type="radio" name="loan_type" value="fha" v-model="loans[sel].type">
<label>FHA</label>
<input type="radio" name="loan_type" value="va" v-model="loans[sel].type">
<label>VA</label>
<input type="radio" name="loan_type" value="usda" v-model="loans[sel].type">
<label>USDA</label>
</section>

<section class="form">
<h3>Loan Details</h3>
<label>Loan Term (years)</label>
<input :value="loans[sel].term"
@input="(e) => loans[sel].term = parseInt(e.target.value.replace(/[^0-9]/g, ''))">

<label>Loan Program</label>
<select id="" name="" v-model="loans[sel].program">
	<option value="none">None</option>
</select>

<label>Loan to Value</label>
<input :value="loans[sel].ltv" @input="setLtv">
<label>Loan Amount</label>
<input :value="loans[sel].amount"
@input="setAmount">
</section>

</div>
</template>

<script>
function setLtv(loan, ltv) {
	if (ltv > 100) ltv = 100
	if (ltv < 0) ltv = 0

	loan.ltv = ltv
	loan.amount = ltv / 100 * loan.price
}

function setAmount(e) {
	let amount = parseInt(e.target.value.replace(/[^0-9]/g, ''))
	let loan = this.loans[this.sel]

	if (amount > loan.price) amount = loan.price
	if (amount < 0) amount = 0
	loan.amount = amount
	loan.ltv = amount / loan.price * 100
}

function setPrice(e) {
	let value = 
	parseInt(e.target.value.replace(/[^0-9]/g, ''))
	// Should check for NaN after backspace

	console.log("the price is %s", value)

	this.loans[this.sel].price =
	value
}

const loans = [
	{
		title: "Loan Example",
		property: "",
		transaction: 0,
		type: "",
		price: 0,
		term: 0,
		ltv: 0,
		amount: 0,
		program: "",
		pud: false,
		zip: ''
	},
	{
		title: "Another One",
		property: "",
		transaction: 0,
		type: "",
		price: 0,
		term: 0,
		ltv: 0,
		program: "",
		pud: true,
		zip: ''
	}
]

const propertyTypes = [
	
]

export default {
	methods: { setPrice },
	props: ['user'],
	data() {
		return {
				loans: loans, sel: 0, loan: loans[0],
			}
	}
}
</script>