skouter/components/fee-dialog.vue

<template>
<Dialog @close="$emit('close')">

<h3>{{heading || "New Fee"}}</h3>

<label>Name</label>
<input type=""
:value="fee.name"
@input="(e) => fee.name = stripLetters(e)">

<label>Amount</label>
<input
type=""
:value="fee.amount"
@input="(e) => {fee.perc = 0; fee.amount = strip(e)}">

<label>Percentage of price</label>
<input
type=""
:value="fee.perc"
@input="(e) => { fee.perc = stripPerc(e);
fee.amount = stripPerc(e)/100*price }">

<select id="" name="" v-model="fee.type">
	<option value="Title Company">Title Company</option>
	<option value="Government">Government</option>
	<option value="Lender">Lender</option>
	<option value="Services Required by Lender">Required by Lender</option>
	<option value="Other">Other</option>
</select>

<button :disabled="!validFee" @click="() => $emit('save', fee, true)">
Debit
</button>

<button :disabled="!validFee" @click="() => $emit('save', fee, false)">
Credit
</button>

</Dialog>
</template>

<script>
import Dialog from "./dialog.vue"
import { stripLetters, strip, stripInt, stripPerc } from "../helpers.js" 

function validFee() {
	const fee = this.fee
	if (!fee.name || !fee.type || !fee.amount) {
		return false
	}
	
	return true
}

export default {
	components: { Dialog },
	methods: {
		stripLetters, strip, stripInt, stripPerc
	},
	computed: {
		validFee,
	},
	props: ['initial', 'heading', 'price'],
	emits: ['close', 'save'],
	data() {
		return { fee: Object.assign({}, this.initial) }
	},
}
</script>