Explorer
project
assets
dollar-vue.svg
components
Navigation.vue
pages
transactions
create.vue
store
index.js
bus.js
index.html
index.js
router.js
styles.css
Dependencies
vue-router@3.1.6
vue@2.6.11
vuex@3.2.0
Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review
command in your #code-reviews channel
<template>
<div class="flex flex-col items-center">
<h1>Add Transaction</h1>
<div class="toggle-switch">
<input type="radio" id="debit" name="transaction_type" v-model="form.type" value="debit" checked>
<label for="debit">Debit</label>
<input type="radio" id="credit" name="transaction_type" v-model="form.type" value="credit">
<label for="credit">Credit</label>
</div>
<template v-if="errors">
<ul>
<li v-for="error in errors">- {{ error }}</li>
</ul>
</template>
<div class="input-field">
<label for="description">Description</label>
<input type="text" id="description" name="transaction_description" placeholder="Enter your description" v-model="form.description">
</div>
<div class="input-field">
<label for="amount">Amount</label>
<div>
<span class="currency">$<span>
<input type="text" id="amount" name="transaction_amount" v-model="form.amount">
</div>
</div>
<div class="mb-12">
<button @click.prevent="addTransaction">Add</button>
</div>
</div>
</template>
<script>
module.exports = {
data: function () {
return {
form: {
type: 'debit',
description: '',
amount: ''
},
errors: []
}
},
methods: {
addTransaction: function () {
if (! this.validForm()) {
return;
}
this.$store.dispatch('addTransaction', this.form);
this.$router.push({ path: '/transactions' });
},
validForm: function () {
this.errors = [];
if (! this.form.description) {
this.errors.push('Description is required');
}
if (! this.form.amount) {
this.errors.push('Amount is required');
}
return (this.errors.length) ? false : true;
}
}
}
</script>