Vue Survey Slideshow - vue.js

Question

I'm working on a survey like this: https://takecareof.com/survey/new using vue. So far I have this:
<template>
<div>
<div class="col-md-4 col-centered">
<div v-on:click="click()" class="survey-button"><slot></slot></div>
</div>
</div>
</template>
<script>
export default {
props: {
answer: {
type: String,
default: null,
}
},
data() {
return {
name: 'taest',
show: true,
}
},
methods: {
click() {
this.$parent.show = false;
//console.log('Question: ' + this.$parent.quesiton);
console.log('Quesiton: ' + this.$parent.getQuestion());
console.log('Answer: ' + this.answer);
console.log('Index: ' + this.$parent.getIndex());
}
}
}
</script>
<template>
<div class="row survey-question" v-show="show">
<h1><slot></slot></h1>
</div>
</template>
<script>
export default {
props: {
question: {
type: String,
default: null,
},
index: {
default: null,
}
},
data() {
return {
name: 'parent',
show: true,
}
},
methods: {
getQuestion() {
return this.question;
},
getIndex() {
return this.index;
}
},
}
</script>
<style>
.survey-question {
padding-top: 8em;
text-align: center;
}
</style>
<div id="app">
<surveyquestion question="how_often" index="0">
Which one best describes you?
<div class="col-md-offset-3">
<surveybutton answer="every_week">I train every week</surveybutton>
<surveybutton answer="some_weeks">I train some weeks</surveybutton>
</div>
</surveyquestion>
<surveyquestion question="where_train" index="1">
Which best describes you?
<surveybutton answer="one_location">I train in one location</surveybutton>
<surveybutton answer="mult_locations">I train in multiple locations</surveybutton>
<surveybutton answer="want_mult_locations">I would like to be able to train in more than one location.</surveybutton>
</surveyquestion>
<surveyquestion question="how_travel" index="2">
Which one best describes you?
<surveybutton answer="between_cities">I travel between cities for work</surveybutton>
<surveybutton answer="interstate">I travel interstate for work</surveybutton>
<surveybutton answer="suburbs">I travel between suburbs for work</surveybutton>
</surveyquestion>
</div>
</div>
I'm not sure how to hide one surveyquestion and show the next one? I wanted to do it like this to make it easy to insert new questions I'm just having trouble hiding and show new ones. In the code, there are two components. The first is the surveybutton and the next is the survey question. I just smashed them together. I'm new to StackOverflow. Any suggestions?

Answer 1

You can act like a wizard in the root element by defining the steps from this.$children and a current_index. Then display only the child component (show = true) at the current_index.
On click, the surveybutton emit a next event which increments the current_index
Fiddle here