In my data array, only the first element is visible by default.
Clicking on either the YES or NO button will display the element with the corresponding id of yes_section or no_section (depending on which button was clicked).
For instance, if we click on the "no 4" button in the Example 1 block, then the Example 4 block will be displayed below. On the other hand, clicking on "yes 2" will reveal the Example 2 block.
Thank you 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>