Как внутри v-for отображать элементы массива пошагово по клику?

Question

[Диана]

Всем привет!
Есть массив с данными. По умолчанию должен быть виден только первый элемент массива.
Далее по клику на кнопку YES или NO нужно показать элемент, чей id соответствует yes_section или no_section (в зависимости от того, на какую кнопку нажимаем)

Например, если в блоке Example 1 кликаем на "no 4", то ниже появляется блок Example 4, а если кликаем на "yes 2", то ниже должен появиться блок Example 2.

Как это можно сделать? Заранее спасибо всем!

<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>

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"
      },
    ]
  }
});

Comments

[Виктор Л]

По мимо stepsData
Введите ещё curentSteps
created: function () {
this.curentSteps = this.stepsData[0]
}
В div выводить выбранный объект
а на кнопки навесить метод меняющий curentSteps

Answer 1

[ettychel]

Одно из решений
Решение бесплатно, без регистрации и СМС