Как во vue js сделать аналог foreach?

Question

[msdoc11]

Как правильно обработать вызов функции, чтобы открывало только там где было нажато. Сейчас открывает только первое меню, при клике на второе ничего не происходит. Не понимаю как это сделать методами vue,
на js делаю просто перебором массива foreach.

<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");
},

Чтобы можно было вставлять в разные места, а вывод через v-for не подходит

Answer 1

[0xD34F]

Никакой "аналог foreach" тут не нужен.

Сделайте компонент: получает через слот контент, который надо показывать/скрывать; содержит свойство, в зависимости от значения которого переданный контент отображается или нет; переключает значение свойства, управляющего видимостью контента, по клику. Как-то так:

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>

Ну а дальше можете создавать экземпляры этого компонента - сколько вам надо и где надо. Всё.

Answer 2

[Антон Белокуров]

Так у вас два элемента с одинаковым селектором.

Comments

[msdoc11]

Он и должен быть одинаковым, в native js легко решается перебором этих элементов

[mirexdoors]

msdoc11, легко, но это так себе решение. У вас же есть при клике event.target, зачем что-то перебирать?