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:
+2
-69
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user