Add loan deletion

assets/main.css

@@ -208,6 +208,7 @@ section.inputs {
 	max-width: 250px;
 	row-gap: 15px;
 }
+
 section.radios h3 {
 	grid-column: 1 / 3;
 }

components/new.vue

@@ -18,14 +18,21 @@ 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="form inputs">
+<h3>Loan</h3>
+<label>Name</label>
+<input :value="loans[sel].title"
+@input="(e) => loans[sel].title = stripLetters(e)">
+<button @click="del">Delete</button>
 </section>
 
 <section class="form inputs">
 <h3>Borrower</h3>
 <label>Number of Borrowers</label>
 <input :value="loans[sel].borrowers"
-@input="(e) => loans[sel].borrowers = strip(e)">
+@input="(e) => loans.forEach(l => l.borrowers = strip(e))">
 <label>Credit Score</label>
 <input :value="loans[sel].creditScore"
 @input="(e) => loans[sel].creditScore = strip(e)">
@@ -103,6 +110,18 @@ function strip(e) {
 	return parseInt(e.target.value.replace(/\D/g, '') || 0)
 }
 
+function stripLetters(e) {
+	return (e.target.value.replace(/\W/g, '') || '')
+}
+
+function del() {
+	if (this.loans.length > 1) {
+		let x = this.sel
+		this.sel = 0
+		this.loans.splice(x, 1)
+	}
+}
+
 function setLtv(e) {
 	let ltv = strip(e)
 	let loan = this.loans[this.sel]
@@ -198,7 +217,8 @@ const propertyTypes = [
 
 export default {
 	methods: {
-		setPrice, setLtv, setAmount, setDti, setHousingDti, strip
+		setPrice, setLtv, setAmount, setDti, setHousingDti,
+		strip, stripLetters, del
 	},
 	props: ['user'],
 	data() {