How to make foreach analog in vue js?

Question

Vue.js

How to correctly handle the function call so that it opens only where it was clicked. Now it opens only the first menu, when you click on the second one, nothing happens. I don’t understand how to do this using vue methods,
on js I just do it by iterating over the foreach array.

<li @click="dropdown" class="dropdown">
  <p>Меню</p>
  <ul class="submenu">
       <li>
            <RouterLink to="/link">Пункт меню</RouterLink>
      </li>
 </ul>
</li>

<li @click="dropdown" class="dropdown">
   <p>Меню 2</p>
   <ul class="submenu">
        <li>
             <RouterLink to="/link">Пункт меню</RouterLink>
             <RouterLink to="/link">Пункт меню 2</RouterLink>
        </li>
   </ul>
</li>

dropdown() {
      document.querySelector(".submenu").classList.toggle("active");
},

So that you can insert in different places, and the output through v-for is not suitable

Answer 1

No "analogue of foreach" is needed here.
Make a component: receives content through the slot that needs to be shown/hidden; contains a property, depending on the value of which the passed content is displayed or not; toggles the value of the property that controls the visibility of the content on click. Something like this:

data: () => ({
  opened: false,
}),

<div class="dropdown">
  <div class="dropdown-header" @click="opened = !opened">
    <slot name="header" :opened="opened">
      {{ opened ? 'CLOSE' : 'OPEN' }}
    </slot>
  </div>
  <div v-if="opened" class="dropdown-content">
    <slot name="content"></slot>
  </div>
</div>

Well, then you can create instances of this component - as much as you need and where you need it. Everything .

Answer 2

So you have two elements with the same selector.