I have an array with data. By default only the first element should be visible.
By clicking on the YES or NO button i need to show the element whose id corresponds to yes_section or no_section (depending on which button were clicked)
For example if in the Example 1 block we click on "no 4" button, then the Example 4 block appears below, and if we click on "yes 2", then the Example 2 block should appear.
Thanks in advance! =)
new Vue({
el: "#app",
data:{
stepsData: [
{
id: "1",
yes_section: "2",
no_section: "4",
name: "Example 1"
},
{
id: "2",
yes_section: "5",
no_section: "3",
name: "Example 2"
},
{
id: "3",
yes_section: "2",
no_section: "4",
name: "Example 3"
},
{
id: "4",
yes_section: "2",
no_section: "4",
name: "Example 4"
},
{
id: "5",
yes_section: "2",
no_section: "4",
name: "Example 5"
},
]
}
});.step {
background: #ccc;
padding: 20px;
margin-bottom: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
v-for="(step, id) in stepsData"
:key="step.id"
class="step"
>
<div class="legal-aid__step-question" v-html="step.name"></div>
<button>YES {{ step.yes_section }}</button>
<button>NO {{ step.no_section }}</button>
</div>
</div>You should save step_id and use computed properties (https://vuejs.org/v2/guide/computed.html) to show needed step info
new Vue({
el: "#app",
data: () => ({
active_step_id: "1",
stepsData: [
{
id: "1",
yes_section: "2",
no_section: "4",
name: "Example 1"
},
{
id: "2",
yes_section: "5",
no_section: "3",
name: "Example 2"
},
{
id: "3",
yes_section: "2",
no_section: "4",
name: "Example 3"
},
{
id: "4",
yes_section: "2",
no_section: "4",
name: "Example 4"
},
{
id: "5",
yes_section: "2",
no_section: "4",
name: "Example 5"
},
]
}),
computed: {
active_step() {
return this.stepsData.find(step => step.id === this.active_step_id)
}
}
});.step {
background: #ccc;
padding: 20px;
margin-bottom: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
class="step"
>
<div class="legal-aid__step-question" v-html="active_step.name"></div>
<button @click.prevent="active_step_id = active_step.yes_section">YES {{ active_step.yes_section }}</button>
<button @click.prevent="active_step_id = active_step.no_section">NO {{ active_step.no_section }}</button>
</div>
</div>