2
0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-14 01:12:23 +03:00

Fix #28 Error to activate tab in destroyed hook

This commit is contained in:
cristijora
2017-08-06 22:21:55 +03:00
parent 9d7a019e3a
commit f369fde5ad
5 changed files with 140 additions and 80 deletions
+2 -69
View File
@@ -1,79 +1,12 @@
<template>
<div>
<button @click="tabs.shift()">Remove one at start</button>
<button @click="tabs.push('testt')">Add at the end</button>
<button @click="tabs.unshift('new start')">Add one at start</button>
<form-wizard @on-complete="onComplete"
:hide-buttons="false"
shape="square"
color="gray"
@on-loading="setLoading"
@on-error="setError"
class="card" ref="wizard">
<template slot="step" scope="props">
<wizard-step :tab="props.tab"
transition="fade"
:key="props.tab.title"
:index="props.index">
</wizard-step>
</template>
<tab-content title="Personal details" icon="ti-user">
My first tab
</tab-content>
<tab-content v-for="tab in tabs" :title="tab" :key="tab" icon="ti-settings">
{{tab}}
</tab-content>
<div class="loader" v-if="loadingWizard"></div>
<div v-if="error">
{{error}}
</div>
</form-wizard>
<router-view></router-view>
</div>
</template>
<script>
import TabContent from "../src/components/TabContent";
export default {
components: {TabContent},
name: 'app',
data () {
return {
loadingWizard: false,
error: null,
count: 0,
tabs: ['test', 'test2', 'test3']
}
},
methods: {
onComplete () {
alert('Yay!')
},
setLoading (value) {
this.loadingWizard = value
},
setError (error) {
this.error = error
},
validateAsync () {
//simulating an error for the first time and a success for the second time
return new Promise((resolve, reject) => {
setTimeout(() => {
if (this.count % 2 === 0) {
reject('Some custom error')
} else {
resolve(true)
}
this.count++
}, 100)
})
},
validate () {
return true
}
}
}
export default {}
</script>
<style>
@import "loader.css";