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 / 100 || ''"
@input="(e) => {fee.perc = 0; fee.amount = Math.round(strip(e) * 100)}">

<label>Percentage of price</label>
<input
type=""
:value="fee.perc"
@input="changePerc">

<select id="" name="" v-model="fee.type">
	<option value="Title">Title Company</option>
	<option value="Government">Government</option>
	<option value="Lender">Lender</option>
	<option value="Required">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)	return false
	if (!fee.amount && !fee.perc) return false
	
	return true
}

function changePerc(e){
    this.fee.perc = stripPerc(e)
    this.fee.amount = stripPerc(e)/100*this.price 
}

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