Vuejs 2: Unable to switch between tabbed form - vue.js

Question

I am using Vue2 for buidling a tab-based form. I am using in my main.js
import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
Vue.use(VueFormWizard)
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
The file AddUser.vue comprises of the following code:
<script>
import swal from 'sweetalert'
export default {
methods: {
validateFirstTab: function () {
this.$validator.validateAll().then((result) => {
if (result) {
return
}
swal('Input Field(s) Validation', 'Please correct the errors!', 'error')
})
}
}
}
</script>
<template>
<div class="wrapper" id="add-user-wrapper">
<section class="content">
<form-wizard #on-complete="onComplete"
shape="tab"
color="#3498db"
error-color="#a94442">
<h2 slot="title">Add a New User</h2>
<tab-content title="User Details" :before-change="validateFirstTab">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Name</label>
<input v-model="user.name" v-validate data-vv-rules="required|alpha_spaces" data-vv-delay="500" data-vv-as="Name" class="form-control" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Enter Name" name="name" autofocus="true" />
<i v-show="errors.has('name')" class="fa fa-warning"></i>
<span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span>
</div>
</div>
</form-wizard>
</section>
</div>
<template>
The problem that I am facing is whenever I am trying to validate the input field it is getting validated correctly but throwing an error on console: "cannot read property then of undefined" while switching to the new tab. I searched through the communities only to get back a solution of returning a Promise with resolve(true) always but still unfortunately, even with a valid input in the first tab, I am unable to switch to the next tab(code not given in the html below).
Can someone help me out in this regard as to what or how should be the approach? As I am quite new to Vue, please let me know if you need any further details

Answer 1

A return value is missing in the validator promise. vue-form-wizard beforeChange function is expecting a boolean.
Here's the TabContent component's beforeChange prop.
/***
* Function to execute before tab switch. Return value must be boolean
* If the return result is false, tab switch is restricted
*/
beforeChange: {
type: Function
},
Here's what actually happens when the promise is resolved.
validateBeforeChange (promiseFn, callback) {
this.setValidationError(null)
// we have a promise
if (isPromise(promiseFn)) {
this.setLoading(true)
promiseFn.then((res) => {
// ^^^
// res is undefined because there is no return value in your case,
// error is catched later on.
//
this.setLoading(false)
let validationResult = res === true
this.executeBeforeChange(validationResult, callback)
}).catch((error) => {
this.setLoading(false)
this.setValidationError(error)
})
// we have a simple function
} else {
let validationResult = promiseFn === true
this.executeBeforeChange(validationResult, callback)
}
},
Try the following:
<script>
import swal from 'sweetalert'
export default {
methods: {
validateFirstTab: function () {
this.$validator.validateAll().then((result) => {
if (result) {
return true
}
swal('Input Field(s) Validation', 'Please correct the errors!', 'error')
return false
})
}
}
}
</script>