Create ValidationError component and use it in TransactionWizard component when necessary
MODIFY
resources/assets/js/app.js
resources/assets/js/app.js
@@ -6,6 +6,7 @@ Vue.component('datepicker', require('./components/DatePicker.vue'))
Vue.component('barchart', require('./components/BarChart.vue'))
Vue.component('dropdown', require('./components/Dropdown.vue'))
Vue.component('transaction-wizard', require('./components/TransactionWizard.vue'))
+Vue.component('validation-error', require('./components/ValidationError.vue'))
const app = new Vue({
el: '#app'

MODIFY
resources/assets/js/components/TransactionWizard.vue
resources/assets/js/components/TransactionWizard.vue
<div class="input input--small">
<label>Date</label>
<input type="text" v-model="date" />
+ <validation-error v-if="errors.date" :message="errors.date"></validation-error>
</div>
<div class="input input--small">
<label>Description</label>
<input type="text" v-model="description" />
+ <validation-error v-if="errors.description" :message="errors.description"></validation-error>
</div>
<div class="input input--small">
<label>Amount</label>
<input type="text" v-model="amount" />
+ <validation-error v-if="errors.amount" :message="errors.amount"></validation-error>
</div>
<button
class="button"
data() {
return {
type: 'earning',
+ errors: [],
date: '',
description: '',
amount: '',
if (!this.loading) {
this.loading = true
- axios.post('/' + this.type, {
- _token: '33lp59tlzHIMCJ1aojp2CT4qZUttdCIWfkgFu1yk',
+ // Reset
+ let errors = []
+
+ axios.post('/' + this.type + 's', {
+ _token: 'hyeEjdASx1ihMrKLW0AUKgJ8jEokfX3goLsi6Mp5',
date: this.date,
description: this.description,
amount: this.amount
- }).then(() => {
+ }).then(response => {
this.date = ''
this.description = ''
this.amount = ''
this.loading = false
alert('Success')
- }).catch(() => {
+ }).catch(error => {
this.loading = false
+ const response = error.response
+
+ if (response.data.errors) {
+ for (let key in response.data.errors) {
+ if (response.data.errors.hasOwnProperty(key)) {
+ errors[key] = response.data.errors[key][0]
+ }
+ }
+ }
+
+ this.errors = errors
+
+ if (response.status != 422) {
alert('Something went wrong')
+ }
})
}
}

ADD
resources/assets/js/components/ValidationError.vue
+<template>
+ <div class="validation_error mt-1">{{ message }}</div>
+</template>
+
+<script>
+ export default {
+ props: ['message']
+ }
+</script>

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -61,3 +61,8 @@ canvas {
}
}
}
+
+.validation_error {
+ color: red;
+ font-size: 14px;
+}

Create ValidationError component and use it in TransactionWizard component when necessary