Vue js handling specific event?

Question

Vue.js

the code itself

<li class="sidebar__item" v-for="category in sidebarList.cat">
                    <h2 class="sidebar__title" @click="sidebarshow()">{{category}}</h2>
                        <ul class="submenu" v-if='sidebarshow()'>
                            <li class="submenu__item" v-for="article in articles(category)">
                                <a href="" class="submenu__link">{{article}}</a>
                            </li>
                        </ul>
                   </li>
            </ul>

The output is a menu with a submenu that's all done, how can I set it up correctly so that only one of the submenu opens when clicked?
In jquery, I would hang a handler on click and get the parent, after that I would find a specific submenu and add a class
example
$(this).parent.find('.submenu').addClass('active')
But in Vue nothing comes in head, any help would be welcome.

Answer 1

Add the active property to data, which you use to display the desired submenu instead of sidebarshow:

<li class="sidebar__item" v-for="(category, index) in sidebarList.cat">
  <h2 class="sidebar__title" @click="active = active === index ? null : index">{{ category }}</h2>
  <ul class="submenu" v-if="active === index">

Of course, it's better if you have some unique identifier in the category - then you should use it instead of an index.