@msdoc11

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

Как правильно обработать вызов функции, чтобы открывало только там где было нажато. Сейчас открывает только первое меню, при клике на второе ничего не происходит. Не понимаю как это сделать методами 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 не подходит
  • Вопрос задан
  • 96 просмотров
Пригласить эксперта
Ответы на вопрос 2
@kyern
Быдлокодер без стажа
Так у вас два элемента с одинаковым селектором.
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы