2
0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-22 19:50:33 +03:00

#12 Remove validations when going to a previous tab

Clear validation error upon tab navigation
This commit is contained in:
cristijora
2017-06-07 22:45:14 +03:00
parent 2f8dc613a5
commit a67fc7bc93
3 changed files with 11 additions and 4 deletions
+8 -2
View File
@@ -9,8 +9,14 @@
@on-loading="setLoading" @on-loading="setLoading"
@on-error="setError" @on-error="setError"
class="card" ref="wizard"> class="card" ref="wizard">
<tab-content v-for="tab in tabs" :title="tab" :key="tab" icon="ti-settings"> <tab-content title="1" icon="ti-settings">
{{tab}} First tab
</tab-content>
<tab-content title="2" icon="ti-settings" :before-change="validateAsync">
Second tab
</tab-content>
<tab-content title="3" icon="ti-settings">
Third tab
</tab-content> </tab-content>
<div class="loader" v-if="loadingWizard"></div> <div class="loader" v-if="loadingWizard"></div>
<div v-if="error"> <div v-if="error">
+1 -1
View File
File diff suppressed because one or more lines are too long
+2 -1
View File
@@ -13,7 +13,7 @@
</div> </div>
<ul class="wizard-nav wizard-nav-pills"> <ul class="wizard-nav wizard-nav-pills">
<li v-for="(tab, index) in tabs" :class="{active:tab.active}"> <li v-for="(tab, index) in tabs" :class="{active:tab.active}">
<a href="" @click.prevent="navigateToTab(index)"> <a href="" @click.prevent="navigateToTab(index, false)">
<div class="wizard-icon-circle" <div class="wizard-icon-circle"
:class="{checked:isChecked(index),square_shape:isStepSquare, tab_shape:isTabShape}" :class="{checked:isChecked(index),square_shape:isStepSquare, tab_shape:isTabShape}"
:style="[isChecked(index)? stepCheckedStyle : {}, tab.validationError ? errorStyle : {}]"> :style="[isChecked(index)? stepCheckedStyle : {}, tab.validationError ? errorStyle : {}]">
@@ -224,6 +224,7 @@
navigateToTab (index, validate = true) { navigateToTab (index, validate = true) {
if (index <= this.maxStep) { if (index <= this.maxStep) {
let cb = () => { let cb = () => {
this.setValidationError(null)
this.changeTab(this.activeTabIndex, index) this.changeTab(this.activeTabIndex, index)
} }
if (validate) { if (validate) {