Как динамически подгрузить список во Vue?

Question

[myskypesla]

Есть код https://codesandbox.io/s/84w0wjk612

При нажатии на Element 1, Element 2, Element 3... справа должен появится список с выпадающим меню и пункты данного меню должны быть взяты из массива elements, который есть внутри каждого элемента.

Соответственно при открытом element 1, и после нажатия на element 2, в правый список должны подгружаться элементы из массива текущего активного элемента.

Вопрос: подскажите решение?

Comments

[Aslan]

https://codesandbox.io/s/vnl1w48r33

[Aslan]

Вообще можно это обернуть в компоненту и сделать рекурсивный список, с неограниченной вложенностью

[myskypesla]

Aslan, Спасибо большое. Круто!

Answer 1

[nvdfxx]

<template>
  <div class="hello">
    <ul>
      <li v-for="item in questions" :key="item.title" @click="toRightArray(item.elements)">{{ item.title }}</li>
    </ul>
    <div class="right">
      <ul>
        <li v-for="item in rightArray" :key="item">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

в data свойство rightArray: [],
в methods:

toRightArray(items) {
      items.forEach(el => {
        this.rightArray.push(el.title)
      })
    }