Как во 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

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

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

Comments

[msdoc11]

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

[mirexdoors]

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

Answer 2

[0xD34F]

data: () => ({
  menu: [
    {
      title: '1',
      opened: false,
      submenu: [
        { title: '1.1', link: '/hello-world!!' },
        { title: '1.2', link: '/fuck-the-world' },
      ],
    },
    {
      title: '2',
      opened: false,
      submenu: [
        { title: '2.1', link: '/fuck-everything' },
      ],
    },
  ],
}),

<li
  v-for="item in menu"
  :class="[ 'dropdown', item.opened ? 'active' : '' ]"
>
  <p @click="item.opened = !item.opened">{{ item.title }}</p>
  <ul class="submenu">
    <li v-for="subitem in item.submenu">
      <router-link :to="subitem.link">{{ subitem.title }}</router-link>
    </li>
  </ul>
</li>