How to hide list in dynamic array?

Question

Vue.js

I have a project structure like this:

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

I can’t figure out how, with such a structure, to implement hiding elements by clicking on three dots

Answer 1

Add boolean show properties to the board.Stages elements.
Click to toggle their values:

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

Show the list if true:

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