Как скрывать список в динамическом массиве?

Question

[idkw13]

у меня структура в проекте такая:

<div class="opportunity-board__column" v-for="stage in board.Stages">
    <div class="opportunity-board__content">
        <div class="opportunity-board__header">
                <div class="opportunity-board__title">{{stage.Name}}</div>
                <ui-icon iconSet="ico-moon" data-icon="i-more">при нажатии сюда нужно скрывать лист с темами(...)</ui-icon>
            </div>
        </div>
        <div class="opportunity-board__list">
                <div class="opportunity-board__item"
                     v-for="opportunity in stage.OwnedOpportunities">
                    <opportunity-item :opportunity="opportunity">
                    </opportunity-item>
                </div>
        </div>
    </div>
</div>

Не могу понять как при такой структуре реализовать скрывания элементов по клике на три точки

Answer 1

[0xD34F]

Элементам board.Stages добавляете булевы свойства show.

По клику переключаете их значения:

<ui-icon
  iconSet="ico-moon"
  data-icon="i-more"
  @click="stage.show = !stage.show"
>

Список показываете если true:

<div
  class="opportunity-board__list"
  v-show="stage.show"
>

Comments

[idkw13]

а если я не могу добавить в board.Stages булевы свойства show.
у меня приходит с сервара только это { "Id": 0, "Name": "Lead" }

[0xD34F]

idkw13, можете. Подумайте.

у меня приходит с сервара только это { "Id": 0, "Name": "Lead" }

А что такое тогда OwnedOpportunities? Какой список вы собираетесь скрывать, если данных для его рендеринга нет? Где-то тут вы врёте, и сильно.