trendplays/resources/js/panel/credits.vue

<template>
<section class="select-credits">
<div class="credits-pane"><h2>10 Credits</h2>
<h3>$10.99</h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits10" type="number"></div>
</div>

<div class="credits-pane"><div><h2>50 Credits</h2><span>+5 Free Credits</span></div>
<h3>$54.99 </h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits50" type="number"></div>
</div>

<div class="credits-pane"><div><h2>100 Credits</h2><span>+10 Free Credits</span></div>
<h3>$109.99</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits100" type="number"></div>
</div>

<div class="credits-pane"><div><h2>1000 Credits</h2><span>+150 Free Credits</span></div>
<h3>$1010</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits1000" type="number"></div>
</div>

	<h3>Total: ${{total.toLocaleString('en')}}</h3>
	<button class="brand-btn">Continue</button>

</section>
</template>

<script>

function total() {
	return this.packs.credits10*10.99 + this.packs.credits50*54.99
	+ this.packs.credits100*109.99 + this.packs.credits1000*1010
}

export default {
	data() {
		return {packs: {credits10: 0, credits50: 0,
		credits100: 0, credits1000: 0}}
	},
	computed: {total}
}
</script>