<template>
<div> <step v-show="index === currentStepIndex" v-for="(step, index) in feedback_path.steps" v-bind:step="step" v-bind:last-step="lastStep" /> </div>
</template> <script>
import Step from './step/base.vue'; import eventHub from './eventHub'; import store from './store';
export default {
props: ['feedback_path'], components: { Step }, data: function() { return { currentStepIndex: 0 }; }, computed: { currentStep: function() { return this.feedback_path.steps[this.currentStepIndex]; }, lastStep: function() { return this.currentStepIndex === (this.feedback_path.steps.length - 1); } }, methods: { nextStep: function(answer) { this.currentStepIndex += 1; store.addStep(answer); return false; }, reset: function() { this.currentStepIndex = 0; return false; } }, mounted: function() { eventHub.$on('reset-modal', this.reset); eventHub.$on('next-step', this.nextStep); }, beforeDestroy: function() { eventHub.$off('next-step'); }
} </script> <style scoped> .feedback-path {
display: flex; flex-direction: column;
} </style>